:root {
    --sol:#0D0D0C; --sol2:#141412; --line:rgba(225,224,204,.14); --carte:#1A1A18;
    --encre:#E1E0CC; --filet:rgba(225,224,204,.14); --filet2:rgba(225,224,204,.28);
    --dim-piste:rgba(225,224,204,.9); --faint-piste:rgba(225,224,204,.72);
    --dim:rgba(225,224,204,.66); --faint:rgba(225,224,204,.58);
    --marge:clamp(22px, 5vw, 78px);
    /* le turquoise de la ligne d'eau de la marque, tel qu'il est dessine sur
       l'accueil ria2d.fr : c'est la couleur ASSIGNEE au studio dans la
       famille. Elle ne sert qu'a ce qui est vivant, la cible visee et l'appel
       a l'action ; les traits et reperes ont leur propre bleu, plus sourd. */
    --eau:#4FD1C5;
    --verre:rgba(13,13,12,.58); --verre-clair:rgba(13,13,12,.44);
    --verre-filet:rgba(225,224,204,.16);
    --flou:blur(15px) saturate(115%);
    --points:'Silkscreen','Courier New',monospace;
  }*{ box-sizing:border-box; margin:0; }html{ scroll-behavior:auto; }body{ background:var(--sol); color:var(--encre);
    font-family:'Almarai',-apple-system,system-ui,sans-serif; font-weight:300;
    -webkit-font-smoothing:antialiased; overflow-x:hidden; }.barre{ position:fixed; z-index:6; top:0; left:0; right:0;
    padding:16px var(--marge); display:flex; justify-content:center; }
  /* UNE SEULE PILULE : marque, liens et bouton dans le meme objet flottant.
     Le mot « Ecluz » n'y est plus, la marque est une roue traversee par une
     ligne d'eau et se suffit ; le nom est repete quatre fois plus bas. */.pilule{ display:flex; align-items:center; gap:1px;
    padding:7px 8px 7px 14px; border-radius:999px;
    background:rgba(13,13,12,.62);
    backdrop-filter:var(--flou); -webkit-backdrop-filter:var(--flou);
    border:1px solid var(--verre-filet); }.sceau{ width:22px; height:22px; color:var(--encre); flex:0 0 auto;
    margin-right:10px; }.pilule a{ text-decoration:none; font-size:13px; padding:7px 14px;
    border-radius:999px; color:var(--dim);
    transition:background .22s, color .22s, opacity .22s; }.pilule a:hover{ background:rgba(225,224,204,.1); color:var(--encre); }.pilule a[aria-current]{ color:var(--encre); }

  /* le depliant : une barre qui liste tout ne se lit plus. La pilule porte
     les etapes de lecture, le depliant donne acces aux pages */.pilule .groupe{ position:relative; }.pilule .groupe > button{ all:unset; cursor:pointer; font-size:13px;
    padding:7px 14px; border-radius:999px; color:var(--dim);
    display:inline-flex; align-items:center; gap:7px;
    transition:background .22s, color .22s; }.pilule .groupe > button:hover, .pilule .groupe[aria-expanded="true"] > button{ background:rgba(225,224,204,.1);
    color:var(--encre); }.pilule .groupe > button i{ font-style:normal; font-size:9px;
    transition:transform .25s ease; }.pilule .groupe[aria-expanded="true"] > button i{ transform:rotate(180deg); }.pilule .tiroir{ max-height:min(72vh, 560px); overflow-y:auto;
    position:absolute; top:calc(100% + 12px); left:50%;
    transform:translateX(-50%) translateY(-6px); min-width:288px;
    background:rgba(13,13,12,.94); backdrop-filter:var(--flou);
    border:1px solid var(--verre-filet); border-radius:4px; padding:8px;
    display:flex; flex-direction:column; gap:2px;
    opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease,
      visibility .22s; }.pilule .groupe[aria-expanded="true"] .tiroir{ opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0); }.pilule .tiroir a{ display:block; padding:9px 13px; border-radius:3px;
    font-size:13px; color:var(--dim); }.pilule .tiroir a:hover{ background:rgba(225,224,204,.08); color:var(--encre); }.pilule .tiroir a span{ display:block; font-size:11.4px; color:var(--faint);
    margin-top:2px; }.pilule a.parlons{ background:var(--eau); color:var(--sol); font-weight:700;
    padding:7px 17px; margin-left:7px; }.pilule a.parlons:hover{ background:var(--eau); color:var(--sol); opacity:.88; }


  /* ---------- le pied de page ---------- */
  /* seconde navigation du site : il tenait sur deux lignes, il porte
     desormais les sections, les pages, la famille et le contact */footer{ border-top:1px solid var(--filet); margin-top:clamp(60px,9vh,110px); }.pied{ max-width:1180px; margin:0 auto;
    padding:clamp(44px,6vh,66px) var(--marge) 0;
    display:grid; gap:clamp(28px,4vw,52px);
    grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); }.pied h4{ font-family:'Almarai',sans-serif; font-size:10.5px; font-weight:400;
    letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
    margin:0 0 14px; }.pied ul{ list-style:none; margin:0; padding:0; display:flex;
    flex-direction:column; gap:9px; }.pied a{ color:var(--dim); text-decoration:none; font-size:13.4px;
    border-bottom:1px solid transparent; transition:color .22s, border-color .22s; }.pied a:hover{ color:var(--encre); border-bottom-color:var(--acier-bas); }.pied .sceau{ width:30px; height:30px; color:var(--encre); margin-bottom:14px; }.pied .mot{ font-size:13.4px; line-height:1.7; color:var(--dim); max-width:34ch; }.bas-pied{ max-width:1180px; margin:clamp(34px,5vh,52px) auto 0;
    padding:20px var(--marge) 40px; border-top:1px solid var(--filet);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-size:12.4px; color:var(--faint); }.bas-pied a{ color:var(--faint); text-decoration:none;
    border-bottom:1px solid transparent; }.bas-pied a:hover{ color:var(--dim); border-bottom-color:var(--filet2); }
  @media (pointer: coarse) {.pied a, .bas-pied a, .pilule .tiroir a{
      min-height:44px; display:flex; align-items:center; }.pied ul{ gap:3px; }}
  @media (max-width:860px) {.pied{ grid-template-columns:1fr 1fr; }}
  @media (max-width:520px) {.pied{ grid-template-columns:1fr; }}



  @media (max-width:860px) {
    /* sous 860 px les quatre liens ne tiennent pas : la pilule garde la
       marque et l'appel a l'action, la navigation est celle de l'acte 2 */.pilule a:not(.parlons){ display:none; }.sceau{ margin-right:4px; }}

  /* la couche technique est dessinee dans le bleu que l'image contient deja :
     205 degres, 64,5 % des pixels colores des 40 images. Le turquoise de la
     marque n'y est pas, et reste donc reserve a ce qui est vivant. */
  /* LE BLEU ACIER DE L'IMAGE, retenu pour les traits et les reperes. La
     sequence est a 64,5 pour cent sur cette teinte, mesuree sur ses 1 175 835
     pixels colores : la couche d'instrumentation appartient donc a la machine
     plutot que d'etre posee dessus. Les deux tons secondaires sont derives du
     premier, 22 et 55 pour cent plus sombres. */
  :root { --acier:#81A3BB; --acier-bas:#658FAC; --grad:#3C7096; }