/* Immovaleur, styles communs aux deux pages. Ne pas dupliquer. */

  :root{
    --marine:#173F73;        /* bleu du logo */
    --beton:#EFF1F3;
    --acier:#4A5A70;
    --rouge:#C8102E;         /* rouge du logo */
    --rouge-cta:#A50D24;
    --graphite:#23272A;
    --brume:#C9D0D8;
    --font-display:"Bricolage Grotesque",sans-serif;
    --font-body:"Public Sans",sans-serif;
    --font-mono:"IBM Plex Mono",monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  a,button{touch-action:manipulation}
  h1,h2,h3{text-wrap:balance}
  [id]{scroll-margin-top:96px}
  .sauter{position:absolute;left:-9999px;top:0;z-index:100;background:var(--marine);
          color:#fff;padding:.8rem 1.2rem;border-radius:0 0 6px 0;text-decoration:none}
  .sauter:focus-visible{left:0}
  body{font-family:var(--font-body);font-size:16px;line-height:1.55;
       color:var(--graphite);background:var(--beton)}
  h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08}
  :focus-visible{outline:3px solid var(--rouge);outline-offset:2px}
  /* sur fond marine le rouge ne fait que 1,79:1 : le contour passe au blanc */
  .apropos :focus-visible,
  #sujet-gestion:not(.actif) :focus-visible{outline-color:#fff}

  /* ---------- rideau d'ouverture ---------- */
  .rideau{position:fixed;inset:0;z-index:70;background:#fff;
          display:grid;place-items:center;will-change:transform}
  .rideau img{width:min(400px,68vw);height:auto;opacity:0;transform:scale(.93);
              transition:opacity .7s ease,transform .7s ease}
  .rideau.pret img{opacity:1;transform:none}
  .rideau.retire{display:none}

  /* Filet de securite : si le CDN GSAP est injoignable (pare-feu, bloqueur, panne),
     site.js s'interrompt et le rideau, en position fixe par-dessus tout, ne serait
     jamais retire. Le drapeau .sans-cdn est pose par index.html juste apres les
     balises <script>, et <noscript> couvre le cas ou JS est desactive. */
  .sans-cdn .rideau{display:none}
  .sans-cdn .hero{background:#141e1a url("hero-frames/h0839.webp") center/cover no-repeat}
  .sans-cdn .reveal{opacity:1;transform:none}
  .sans-cdn .intro h1 .ligne,.sans-cdn .fin-titre{opacity:1;transform:none}

  /* ---------- nav ---------- */
  .nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;
       justify-content:space-between;padding:1.1rem 4vw;
       background:linear-gradient(rgba(20,30,26,.6),rgba(20,30,26,0))}
  .logo{display:inline-flex;align-items:center}
  .logo img{display:block;height:58px;width:auto;
            filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}   /* ombre discrète, pas de halo blanc */

  /* ---------- menu latéral ---------- */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
          width:44px;height:44px;padding:0 9px;background:rgba(255,255,255,.92);
          border:none;border-radius:6px;cursor:pointer}
  .burger i{display:block;height:3px;border-radius:2px;background:var(--marine)}
  .voile{position:fixed;inset:0;z-index:60;background:rgba(20,25,32,.45);
         opacity:0;pointer-events:none;transition:opacity .3s}
  .voile.ouvert{opacity:1;pointer-events:auto}
  .tiroir{position:fixed;top:0;right:0;bottom:0;z-index:61;background:#fff;
          width:50vw;min-width:340px;max-width:620px;
          display:flex;flex-direction:column;
          padding:1.1rem 2.6rem 2rem;overflow-y:auto;overscroll-behavior:contain;
          box-shadow:-16px 0 48px rgba(12,22,40,.16);
          transform:translateX(102%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .tiroir.ouvert{transform:none}
  .tiroir-tete{display:flex;align-items:center;justify-content:space-between;
               margin-bottom:2.2rem}
  .tiroir-tete img{height:56px;width:auto}
  .tiroir .fermer{width:44px;height:44px;background:none;cursor:pointer;
                  border:1px solid var(--brume);border-radius:6px;
                  font-size:1.3rem;color:var(--graphite);line-height:1}
  .tiroir .fermer:hover,.tiroir .fermer:focus-visible{border-color:var(--rouge)}
  .tiroir ul{list-style:none;flex:1}
  .tiroir li{border-bottom:1px solid #ececec}
  .tiroir .item{display:flex;width:100%;align-items:center;justify-content:space-between;
                gap:.6rem;padding:1.15rem 0;
                font-family:var(--font-display);font-weight:700;font-size:1.5rem;
                color:var(--graphite);text-decoration:none;background:none;border:none;
                cursor:pointer;text-align:left}
  .tiroir .item{transition:color .22s ease,transform .28s cubic-bezier(.22,1,.36,1)}
  .tiroir .item:hover,.tiroir .item:focus-visible{color:var(--rouge-cta);transform:translateX(9px)}
  .tiroir li{position:relative;overflow:hidden}
  .tiroir li::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
                    background:var(--rouge);transform:scaleX(0);transform-origin:left;
                    transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .tiroir li:hover::after{transform:scaleX(1)}
  .tiroir .fleche{color:var(--brume);font-size:1.5rem;line-height:1;
                  transition:transform .25s,color .25s;display:inline-block}
  .tiroir .item:hover .fleche{color:var(--rouge)}
  .tiroir .item[aria-expanded="true"] .fleche{transform:rotate(90deg);color:var(--rouge)}
  .tiroir .sous{list-style:none;padding:0 0 1rem 1.2rem;display:none}
  .tiroir .sous.ouvert{display:block}
  .tiroir .sous li{border:none;margin:0}
  .tiroir .sous a{display:block;padding:.45rem 0;font-family:var(--font-body);
                  font-weight:600;font-size:1rem;color:var(--rouge-cta);text-decoration:none}
  .tiroir .sous a:hover,.tiroir .sous a:focus-visible{color:var(--marine)}
  /* bas du menu lateral : memes icones et memes couleurs que le pied de page */
  .tiroir-pied{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid #ececec;
               display:grid;gap:.85rem;justify-items:start;font-size:.95rem}
  .tiroir-pied a,.tiroir-pied .vide{display:flex;align-items:center;gap:.7rem;
                 text-decoration:none;font-family:var(--font-body);font-weight:600;
                 color:var(--rouge-cta)}
  .tiroir-pied a{transition:color .2s ease,transform .3s cubic-bezier(.22,1,.36,1)}
  .tiroir-pied a span{position:relative}
  .tiroir-pied a span::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;
                    background:currentColor;transform:scaleX(0);transform-origin:left;
                    transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .tiroir.ouvert .tiroir-pied a:hover,
  .tiroir.ouvert .tiroir-pied a:focus-visible{color:var(--marine);transform:translateX(5px)}
  /* meme reaction sur les lignes encore vides, pour qu'elles ne paraissent pas mortes */
  .tiroir.ouvert .tiroir-pied .vide:hover{color:var(--graphite);transform:translateX(5px)}
  .tiroir-pied a:hover span::after,.tiroir-pied a:focus-visible span::after{transform:scaleX(1)}
  .tiroir.ouvert .tiroir-pied a:active{transform:translateX(5px) scale(.97)}
  .tiroir-pied a:focus-visible{outline:none}
  .tiroir-pied .vide{color:var(--brume);cursor:default;
                 transition:color .2s ease,transform .3s cubic-bezier(.22,1,.36,1)}
  .tiroir-pied svg{width:17px;height:17px;flex:0 0 17px;
                   stroke:var(--graphite);fill:none;stroke-width:1.8;
                   stroke-linecap:round;stroke-linejoin:round;
                   transition:stroke .2s ease,fill .2s ease,transform .3s cubic-bezier(.22,1,.36,1)}
  .tiroir-pied a:hover svg,.tiroir-pied a:focus-visible svg{stroke:var(--rouge);transform:scale(1.12)}
  .tiroir-pied a[target] svg,.tiroir-pied .vide:last-child svg{fill:var(--graphite);stroke:none}
  .tiroir-pied a[target]:hover svg,.tiroir-pied a[target]:focus-visible svg{fill:var(--rouge);stroke:none}
  .tiroir-pied .vide svg{stroke:var(--brume)}
  .tiroir-pied .vide:hover svg{stroke:var(--rouge);transform:scale(1.12)}
  .tiroir-pied .vide:last-child:hover svg{fill:var(--rouge);stroke:none}
  .tiroir-pied .vide:last-child svg{fill:var(--brume);stroke:none}
  /* apparition en cascade a l'ouverture du menu */
  .tiroir-pied>*{opacity:0;transform:translateY(8px);
                 transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
  .tiroir.ouvert .tiroir-pied>*{opacity:1;transform:none}
  .tiroir.ouvert .tiroir-pied>*:nth-child(1){transition-delay:.16s}
  .tiroir.ouvert .tiroir-pied>*:nth-child(2){transition-delay:.22s}
  .tiroir.ouvert .tiroir-pied>*:nth-child(3){transition-delay:.28s}
  /* le retard sert a la cascade, pas au survol */
  .tiroir.ouvert .tiroir-pied>*:hover,
  .tiroir.ouvert .tiroir-pied>*:focus-visible{transition-delay:0s}

  @media (prefers-reduced-motion:reduce){
    .tiroir{transition:none}
    .voile{transition:none}
    .tiroir-pied>*{opacity:1;transform:none;transition:none}
    .tiroir-pied a,.tiroir-pied svg{transition:color .2s ease}
    .tiroir-pied a:hover,.tiroir-pied a:focus-visible{transform:none}
  }

  /* ---------- sections ---------- */
  .bande{padding:6rem 7vw;max-width:1200px;margin:0 auto}
  .bande h2{font-size:clamp(1.9rem,3.4vw,2.8rem);max-width:20ch}
  .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
           color:var(--acier);display:block;margin-bottom:1rem}

  .apropos{background:var(--marine);color:#e9efe9;position:relative;overflow:hidden}
  /* le filigrane : la bande répond elle-même à « La valeur porte un nom » */
  .apropos::before{content:"IMMOVALEUR";position:absolute;left:50%;top:44%;
    transform:translate(-50%,-50%);white-space:nowrap;
    font-family:var(--font-mono);font-weight:500;font-size:8.6vw;line-height:1;
    letter-spacing:.22em;
    color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none}
  .apropos>*{position:relative}
  /* la reponse, en toutes lettres, juste sous la declaration */
  .apropos .nom-reponse{margin:.7rem 0 0;font-family:var(--font-mono);font-weight:500;
    font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:.22em;line-height:1;
    color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.65)}
  .apropos .nom-reponse span{color:var(--rouge);-webkit-text-stroke:0}
  /* les trois jalons sous la déclaration */
  .jalons{max-width:1200px;margin:0 auto;padding:0 7vw 5.5rem;
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .jalon-c{border-top:3px solid var(--rouge);padding:1.3rem 1.4rem 1.5rem;
    background:rgba(255,255,255,.06)}
  .jalon-c span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
    color:var(--rouge);display:block;margin-bottom:.55rem}
  .jalon-c b{display:block;font-family:var(--font-display);font-weight:800;
    font-size:1.5rem;color:#fff;margin-bottom:.4rem}
  @media (max-width:820px){ .jalons{grid-template-columns:1fr} }
  /* Engagement, version B : declaration centree, typo du heros, rangee de chiffres */
  #apropos .bande{display:block;text-align:center;max-width:1200px;margin:0 auto;padding-bottom:0}
  /* l'etiquette reprend la place des autres sections : en haut a gauche, meme marge */
  /* etiquettes : blanc sur pastille rouge (le rouge en fond se lit sans fatiguer) */
  /* l'etiquette se fait discrete : le slogan doit dominer */
  #apropos .eyebrow{display:block;margin:0 0 2rem;text-align:left;color:rgba(255,255,255,.75);
    font-weight:700;font-size:.78rem;letter-spacing:.2em}
  #apropos .eyebrow::before{content:"";display:inline-block;width:24px;height:3px;background:var(--rouge);
    vertical-align:middle;margin-right:.7em}
  #apropos .jalon-c span{display:inline-block;color:#fff;background:var(--rouge);padding:.5em .75em;
    border-radius:3px;font-weight:700;font-size:.8rem;letter-spacing:.12em;margin-top:.8rem}
  .apropos::before{display:none}   /* le filigrane ferait doublon avec le nom affiche */
  #apropos h2{margin-left:auto;margin-right:auto;text-wrap:balance}   /* boite centree, lignes equilibrees */
  .apropos h2{font-family:"Archivo Black",sans-serif;font-weight:400;text-transform:uppercase;
    font-size:clamp(2rem,8vw,5.4rem);line-height:.95;letter-spacing:-.01em}
  .apropos .nom-reponse{font-family:"Archivo Black",sans-serif;font-weight:400;
    font-size:clamp(1.7rem,5.6vw,3.8rem);letter-spacing:.04em;margin-top:.7rem;
    width:max-content;position:relative;left:50%;transform:translateX(-50%);   /* centre meme s'il deborde */
    -webkit-text-stroke:1.5px rgba(255,255,255,.7)}
  .apropos #aProposTexte{max-width:42ch;margin:1.6rem auto 0}
  .jalons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;
    margin:0 auto;padding:3.2rem 7vw 5.5rem;gap:0}   /* colonnes egales : le chiffre du milieu reste au centre */
  .jalon-c{border:0;background:none;padding:0 1rem;text-align:center;
    border-left:1px solid rgba(255,255,255,.22)}
  .jalon-c:first-child{border-left:0}
  .jalon-c b{font-family:"Archivo Black",sans-serif;font-weight:400;
    font-size:clamp(2rem,4vw,3rem);line-height:1;margin:0}
  .jalon-c span{margin:.6rem 0 0}
  @media (max-width:820px){
    .jalons{grid-template-columns:1fr;gap:1.8rem}
    .jalon-c{border-left:0;padding:0}
  }
  .apropos .bande{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
                  gap:3rem;align-items:start;padding-bottom:3rem}
  .apropos h2{color:#fff}
  .apropos p{font-weight:300;line-height:1.75;font-size:1.05rem}
  .apropos .eyebrow{color:var(--rouge)}

  /* ---------- apparitions au défilement ---------- */
  .reveal{opacity:0;transform:translateY(22px)}
  .js-off .reveal{opacity:1;transform:none}

  /* ---------- sous-traitants ---------- */
  .soustraitants{background:#fff;border-top:1px solid var(--brume)}
  .aiguillage{margin-top:2.8rem;display:grid;
              grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
  .aig{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit;
       background:var(--beton);border:1px solid var(--brume);border-radius:10px;padding:1.9rem 1.7rem;
       transition:border-color .2s,box-shadow .2s,transform .2s}
  .aig:hover,.aig:focus-visible{border-color:var(--rouge);transform:translateY(-3px);
       box-shadow:0 12px 30px rgba(23,63,115,.12)}
  .aig b{font-family:var(--font-display);font-size:1.22rem}
  .aig span{font-weight:300;font-size:.95rem;color:#4a5350}
  .aig em{font-style:normal;font-family:var(--font-mono);font-size:.72rem;
          letter-spacing:.14em;color:var(--rouge-cta);margin-top:.3rem}
  .st-texte{font-weight:300;color:#4a5350;max-width:42ch}

  .st-carte{background:var(--beton);border:1px solid var(--brume);border-radius:8px;
            padding:2.2rem}
  .st-champs{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
  .champ{display:flex;flex-direction:column;gap:.4rem;min-width:0}
  .champ.large{grid-column:1 / -1}
  .champ label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
               color:var(--acier)}
  .champ label .req{color:var(--rouge)}
  .champ input,.champ select,.champ textarea{
    font-family:var(--font-body);font-size:1rem;color:var(--graphite);   /* 16 px : sous ce seuil Safari iOS zoome au focus */
    background:#fff;border:1px solid var(--brume);border-radius:5px;
    padding:.75rem .85rem;width:100%;transition:border-color .2s,box-shadow .2s}
  .champ textarea{resize:vertical;min-height:104px}
  .champ input:focus,.champ select:focus,.champ textarea:focus{
    outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(23,63,115,.14)}
  .champ input:user-invalid,.champ select:user-invalid{border-color:var(--rouge)}
  /* message d'erreur logé sous son propre champ, vide au repos donc sans réserve d'espace */
  .champ-erreur{font-size:.8rem;font-weight:600;color:var(--rouge);line-height:1.35}
  .champ-erreur:empty{display:none}
  .champ input[aria-invalid="true"],.champ select[aria-invalid="true"],
  .champ textarea[aria-invalid="true"]{border-color:var(--rouge)}
  .st-envoi{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
  .st-bouton{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.08em;
             background:var(--rouge-cta);color:#fff;border:none;border-radius:4px;
             padding:.95rem 1.9rem;cursor:pointer;transition:background .2s,transform .2s}
  .st-bouton:hover,.st-bouton:focus-visible{background:#83091c;transform:translateY(-1px)}
  .st-bouton[disabled]{opacity:.6;cursor:progress;transform:none}
  .st-etat{font-size:.92rem;font-weight:600}
  .st-etat.ok{color:#1d7a4a}
  .st-etat.erreur{color:var(--rouge)}
  .st-note{margin-top:1rem;font-size:.82rem;color:var(--acier);font-weight:300}

  /* ---------- projets en cours ----------
     Choix rouge centre Commercial / Residentiel (l'un ou l'autre), puis la liste numerotee :
     numero evide, nom, type et ville. Un clic sur la ligne fait sortir le rendu du numero et le
     range a droite, entre les filets de la ligne ; un clic sur le rendu ouvre <dialog id="rendu">
     plein ecran avec la fiche (type, adresse, ville, region, superficie au sol). */
  .projets.encours{background:var(--marine);color:#e9efe9}
  .projets.encours h2{color:#fff}
  /* meme langage que « Notre engagement » : etiquette discrete, titre du heros centre */
  #en-cours .eyebrow{display:block;text-align:left;color:rgba(255,255,255,.75);
    font-weight:700;font-size:.78rem;letter-spacing:.2em;margin-bottom:2rem}
  #en-cours .eyebrow::before{content:"";display:inline-block;width:24px;height:3px;background:var(--rouge);
    vertical-align:middle;margin-right:.7em}
  #en-cours h2{font-family:"Archivo Black",sans-serif;font-weight:400;text-transform:uppercase;
    font-size:clamp(2rem,6.5vw,4.4rem);line-height:.95;letter-spacing:-.01em;
    text-align:center;max-width:none;margin:0 auto;text-wrap:balance}
  /* lien Facebook : coin bas droit de la section, suit l'ouverture des onglets */
  #en-cours .bande{position:relative}
  /* ancre dans le coin bas droit de la bande bleue, dans la marge du bas (jamais sur la liste) */
  #en-cours .suivi-fb{position:absolute;right:7vw;bottom:1.6rem;margin:0;opacity:0;visibility:hidden;
    transition:opacity .35s ease,visibility 0s linear .35s,background .25s ease,border-color .25s ease}
  /* complement de la liste : n'apparait qu'une fois Commercial ou Residentiel ouvert */
  #en-cours:has(.groupe-corps.ouvert) .suivi-fb{opacity:1;visibility:visible;
    transition:opacity .35s ease .2s,visibility 0s,background .25s ease,border-color .25s ease}
  .suivi-fb{display:flex;align-items:center;gap:.55rem;width:fit-content;margin:2rem 0 0 auto;
    padding:.3rem .32rem .3rem .8rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;
    color:#fff;text-decoration:none;font:600 .6rem/1 var(--font-mono);letter-spacing:.1em;
    text-transform:uppercase;transition:background .25s ease,border-color .25s ease}
  .suivi-fb .rond{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
    border-radius:50%;background:var(--rouge);transition:transform .25s ease}
  .suivi-fb svg{width:12px;height:12px;fill:#fff}
  .suivi-fb:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
  .suivi-fb:hover .rond{transform:rotate(-8deg) scale(1.08)}
  @media (max-width:560px){ .suivi-fb{font-size:.56rem;letter-spacing:.06em} }
  #grilleEnCours{margin-top:2.2rem}
  .choix{display:flex;justify-content:center;gap:1.1rem;flex-wrap:wrap}
  /* meme signature que les boutons « EN SAVOIR PLUS » : coins chanfreines, filet rouge,
     fond rouge qui balaie de gauche a droite au survol et reste quand le choix est actif */
  .choix-btn{all:unset;cursor:pointer;position:relative;box-sizing:border-box;min-width:15rem;text-align:center;
             padding:1rem 2.2rem;overflow:hidden;color:#fff;border:1px solid rgba(255,255,255,.4);
             clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
             font-family:var(--font-mono);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
             transition:color .28s ease,border-color .28s ease}
  .choix-btn::before{content:"";position:absolute;inset:0;background:var(--rouge);transform:scaleX(0);
                     transform-origin:left;transition:transform .38s cubic-bezier(.22,1,.36,1)}
  .choix-btn>span,.choix-btn::after{position:relative}
  .choix-btn:hover,.choix-btn.actif{border-color:var(--rouge);color:#fff}
  .choix-btn:hover::before,.choix-btn.actif::before{transform:scaleX(1)}
  .choix-btn.actif:hover::before{transform-origin:right}
  .choix-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
  .groupe-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
  .groupe-corps>.liste-projets{overflow:hidden;min-height:0}
  .groupe-corps.ouvert{grid-template-rows:1fr}
  .groupe-corps .projet{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1),
                        grid-template-columns .55s cubic-bezier(.22,1,.36,1),gap .55s cubic-bezier(.22,1,.36,1)}
  .groupe-corps.ouvert .projet{opacity:1;transform:none}
  .groupe-corps.ouvert .projet:nth-child(2){transition-delay:.06s}
  .groupe-corps.ouvert .projet:nth-child(3){transition-delay:.12s}
  .groupe-corps.ouvert .projet:nth-child(4){transition-delay:.18s}
  .groupe-corps.ouvert .projet:nth-child(5){transition-delay:.24s}
  .groupe-corps.ouvert .projet:nth-child(n+6){transition-delay:.3s}
  .liste-projets{counter-reset:proj}
  .groupe-corps.ouvert .liste-projets{padding-top:2.4rem}
  /* la colonne du rendu est toujours reservee : ouvrir une ligne n'anime que l'image (opacite,
     glissement, hauteur), jamais la grille entiere, d'ou une ouverture fluide */
  .projet{position:relative;display:grid;grid-template-columns:5rem minmax(0,1fr) min(24rem,40%);gap:0 2rem;align-items:center;
          border-top:1px solid rgba(255,255,255,.14)}
  .projet:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  /* le numero evide : lettre O plutot que le zero pointe de Plex Mono, comme dans les depliants */
  .projet::before{counter-increment:proj;content:"O" counter(proj);
          font-family:var(--font-mono);font-weight:500;font-size:3.2rem;line-height:1;letter-spacing:.04em;
          color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.55);transition:-webkit-text-stroke-color .25s}
  .projet:nth-child(n+10)::before{content:counter(proj)}
  .projet:hover::before,.projet.ouvert::before{-webkit-text-stroke-color:var(--rouge)}
  .projet-nom{all:unset;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;
              grid-template-areas:"nom voir" "meta voir";align-items:center;column-gap:1.5rem;
              padding:1.7rem 0;color:#e9efe9;width:100%;box-sizing:border-box}
  .projet-nom:focus-visible{outline:3px solid #fff;outline-offset:4px}
  .projet-nom b{grid-area:nom;font-family:var(--font-display);font-size:1.5rem;line-height:1.2;color:#fff;transition:color .25s}
  .projet-nom:hover b{color:#fff}
  .projet-nom .meta{grid-area:meta;margin-top:.45rem;font-family:var(--font-mono);font-size:.7rem;
                    letter-spacing:.14em;color:rgba(255,255,255,.65);text-transform:uppercase}
  .projet-nom .voir{grid-area:voir;font-size:1.9rem;line-height:1;color:rgba(233,239,233,.55);transition:color .25s,transform .35s}
  .projet-nom:hover .voir{color:var(--rouge);transform:translateX(8px)}
  .projet.ouvert .voir{transform:rotate(90deg);color:var(--rouge)}
  /* le rendu dans la ligne : replie (hauteur 0), puis tire du numero vers la droite ;
     ombre douce dessinee par le navigateur (drop-shadow suit la silhouette detouree) */
  .projet .cadre{all:unset;cursor:zoom-in;box-sizing:border-box;display:block;width:100%;max-height:0;
                 overflow:visible;background:transparent;margin:0;position:relative;
                 opacity:0;transform:translateX(-45%);pointer-events:none;
                 transition:max-height .5s cubic-bezier(.22,1,.36,1),margin .5s cubic-bezier(.22,1,.36,1),
                            opacity .4s ease .08s,transform .6s cubic-bezier(.22,1,.36,1) .04s}
  .projet.ouvert .cadre{max-height:20rem;margin:1.1rem 0;opacity:1;transform:none;pointer-events:auto}
  .projet .cadre:focus-visible{outline:3px solid #fff;outline-offset:3px}
  /* la photo : cadre fin, coins doux, ombre portee, comme un tirage pose sur le bleu */
  .projet .cadre img{width:100%;height:auto;max-height:18rem;object-fit:cover;aspect-ratio:3/2;display:block;
                     border-radius:6px;border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 34px rgba(0,0,0,.38);
                     transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
  .projet .cadre:hover img{transform:translateY(-3px);box-shadow:0 26px 40px rgba(0,0,0,.45)}
  .projet .cadre::after{content:"RENDU PRÉLIMINAIRE";display:block;margin-top:.55rem;font-family:var(--font-mono);
                        font-size:.6rem;letter-spacing:.16em;color:rgba(233,239,233,.5)}
  .projet .vide{display:grid;place-items:center;height:100%;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--acier)}
  /* plein ecran : rendu sur fond sombre, fiche en bandeau sous l'image */
  .rendu{margin:0;border:0;padding:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
         background:var(--marine);color:#fff;display:none;grid-template-rows:minmax(0,1fr) auto}
  .rendu[open]{display:grid}
  .rendu::backdrop{background:rgba(11,28,47,.9)}
  .rendu img{display:block;width:100%;height:100%;object-fit:contain;padding:4vh 4vw 3vh;box-sizing:border-box}
  .rendu img[hidden],.rendu .sans[hidden]{display:none}
  .rendu .sans{display:grid;place-items:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:rgba(255,255,255,.6)}
  .rendu-txt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 2.5rem;align-items:center;
             padding:1.3rem 7vw 1.6rem;background:#fff;color:var(--graphite)}
  .rendu-txt .eyebrow{grid-column:1/-1;margin:0;color:var(--rouge-cta)}
  .rendu-txt b{font-family:var(--font-display);font-size:1.7rem;line-height:1.15;color:var(--marine)}
  .rendu-txt p{margin:0;font-weight:300;font-size:1rem;line-height:1.6;color:#4a5350}
  .rendu-txt .type{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
                   color:var(--rouge-cta);display:block;margin-bottom:.2rem}
  /* la mise en garde vit en haut a gauche de l'image, loin de la fiche */
  .rendu .note-rendus{position:absolute;left:7vw;top:1.3rem;right:5rem;margin:0;max-width:60ch;
                      font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;line-height:1.6;color:rgba(255,255,255,.62)}
  .rendu-fermer{position:absolute;top:1rem;right:1rem;width:2.8rem;height:2.8rem;border-radius:50%;border:0;
                background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center}
  .rendu-fermer:hover,.rendu-fermer:focus-visible{background:var(--rouge)}
  @media (max-width:820px){
    .choix-btn{min-width:0;flex:1 1 10rem;padding:.9rem 1rem}
    .projet{grid-template-columns:3rem minmax(0,1fr);gap:0 1.2rem}
    .projet::before{font-size:2.4rem;align-self:start;margin-top:1.5rem}
    .projet-nom{padding:1.3rem 0}
    .projet-nom b{font-size:1.25rem}
    .projet .cadre{grid-column:2;transform:translateY(-14px)}
    .projet.ouvert .cadre{margin:0 0 1.2rem}
    .rendu-txt{grid-template-columns:1fr;padding:1rem 1.2rem 1.3rem}
  }
  @media (prefers-reduced-motion:reduce){ .projet::before,.projet-nom b,.projet-nom .voir,.projet .cadre,.projet .cadre img,.groupe-corps,.groupe-corps .projet,.choix-btn,.choix-btn::before{transition:none} .groupe-corps .projet{opacity:1;transform:none} }

  /* ---------- partenaires ---------- */
  .partenaires{background:#fff}
  .parts{margin-top:3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
         gap:2.5rem 2rem;align-items:center}
  .part{display:grid;place-items:center;min-height:96px;text-align:center;
        filter:grayscale(1);opacity:.75;transition:filter .25s,opacity .25s}
  .part:hover{filter:none;opacity:1}
  .part img{height:64px;width:auto;max-width:200px;object-fit:contain}   /* hauteur explicite : un SVG sans width/height s'effondre a 0 dans Safari */
  .part span{font-family:var(--font-display);font-weight:800;color:#9aa0a6;
             font-size:1.15rem;line-height:1.25;max-width:22ch}
  .part span.court{font-size:2.1rem;letter-spacing:.04em}

  /* ---------- pied de page 3 colonnes ---------- */
  footer{background:#fff;border-top:1px solid var(--brume)}
  .pied{max-width:1200px;margin:0 auto;padding:4.5rem 7vw 3rem;
        display:grid;grid-template-columns:1.2fr 1fr 1.3fr;gap:3rem}
  .pied h3{font-size:1.35rem;margin-bottom:.4rem}
  .pied .trait{width:44px;height:4px;background:var(--rouge);margin-bottom:1.4rem}
  .pied-logo img{height:70px;width:auto;margin-bottom:1.2rem}
  .pied p{font-weight:300;font-size:.95rem;color:#4a5350;max-width:34ch}
  .pied ul{list-style:none;display:flex;flex-direction:column;gap:.85rem}
  .pied ul a{color:var(--rouge-cta);text-decoration:none;font-weight:600;
             font-size:.95rem;transition:color .2s}
  .pied ul a:first-child{color:var(--graphite)}
  .pied ul a{position:relative;display:inline-block;
             transition:color .2s ease,transform .25s ease}
  .pied ul a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;
                    background:currentColor;transform:scaleX(0);transform-origin:left;
                    transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .pied ul a:hover::after,.pied ul a:focus-visible::after{transform:scaleX(1)}
  .pied ul a:hover,.pied ul a:focus-visible{color:var(--marine);transform:translateX(3px)}
  .coord{display:flex;flex-direction:column;gap:.85rem;font-size:.95rem}
  .coord .ligne{display:flex;gap:.7rem;align-items:flex-start;min-width:0}
  .coord .ligne>*{overflow-wrap:anywhere}
  .coord svg{width:17px;height:17px;flex-shrink:0;margin-top:.15rem;
             stroke:var(--graphite);fill:none;stroke-width:1.8;
             stroke-linecap:round;stroke-linejoin:round}
  .coord .adr{color:#4a5350;font-weight:300}
  .coord a,.coord b{color:var(--rouge-cta);font-weight:600;text-decoration:none}
  /* padding vertical : la cible tactile passe de 24 a 44 px */
  /* zone tactile elargie sans toucher a la mise en page : un pseudo-element absolu
     deborde de 6,4 px au-dessus et au-dessous du texte, soit 37 px pour un pas de
     ligne de 37 : les zones de deux liens voisins se touchent sans se chevaucher */
  .coord a{position:relative;display:inline-block}
  .coord a::before,.pied ul a::before{content:"";position:absolute;left:0;right:0;top:-.4rem;bottom:-.4rem}
  .coord a:hover,.coord a:focus-visible{color:var(--marine)}
  .pied-bas{border-top:1px solid var(--brume);text-align:center;
            padding:1.3rem 7vw;font-size:.82rem;font-weight:300;color:#6a7370}
  @media (max-width:900px){ .pied{grid-template-columns:1fr;gap:2.5rem} }

  @media (max-width:820px){
    .jalon{right:3.5vw;height:44vh}
    .marteau{width:27px;height:27px}
    .apropos .bande{grid-template-columns:1fr}
    .st-carte{padding:1.6rem}
    .st-champs{grid-template-columns:1fr}
    .logo{font-size:1.05rem}
  }

/* section « Nos sujets » : bande distincte, même langage que L'entreprise */

/* ---- sujets : sections abstraites, coupes diagonales ---- */
.sujet-sec{position:relative;overflow:hidden;background:#fff;
           clip-path:polygon(0 0, 100% 4vw, 100% 100%, 0 100%);
           margin-top:-4vw;padding-top:4vw}
#carrefour .sujet-sec:first-child{clip-path:none;margin-top:0;padding-top:0}
.sujet-sec.alt{background:var(--beton);
               clip-path:polygon(0 4vw, 100% 0, 100% 100%, 0 100%)}
.sujet-sec::before{content:"";position:absolute;top:-12%;bottom:-12%;width:38%;
                   right:-10%;transform:skewX(-14deg);pointer-events:none;
                   background:linear-gradient(160deg, rgba(23,63,115,.07), rgba(23,63,115,0) 65%)}
.sujet-sec.alt::before{right:auto;left:-10%;transform:skewX(14deg);
                   background:linear-gradient(200deg, rgba(200,16,46,.06), rgba(200,16,46,0) 65%)}
.sujet-num{position:absolute;top:50%;right:3vw;transform:translateY(-50%);
           font-family:var(--font-display);font-weight:800;line-height:1;
           font-size:clamp(8rem,20vw,17rem);color:transparent;
           -webkit-text-stroke:2px rgba(23,63,115,.13);user-select:none;pointer-events:none}
.sujet-sec.alt .sujet-num{right:auto;left:3vw;-webkit-text-stroke-color:rgba(200,16,46,.12)}
.sujet-sec .bande{position:relative;z-index:1}
.sujet-sec.alt .sujet-txt{margin-left:auto;text-align:left;max-width:56ch}
.sujet-sec h2{margin-top:.4rem}
.sujet-sec p{margin-top:.9rem;font-weight:300;font-size:1.06rem;line-height:1.7;
             color:#4a5350;max-width:52ch}
.sujet-lien{display:inline-block;margin-top:1.4rem;font-family:var(--font-mono);
            font-size:.78rem;letter-spacing:.12em;color:var(--rouge-cta);
            text-decoration:none;transition:transform .25s}
.sujet-lien{background:none;border:none;cursor:pointer;padding:0}
.sujet-lien:hover{transform:translateX(5px)}
.sujet-lien .chev{display:inline-block;transition:transform .3s}
.sujet-sec.actif .sujet-lien .chev{transform:rotate(90deg)}

/* ---- état actif : la section se soulève et s'ouvre ---- */
.sujet-sec{transition:opacity .45s ease;z-index:1}
.sujet-sec .bande{transition:transform .45s cubic-bezier(.22,1,.36,1),
                  box-shadow .45s ease,background .45s ease,border-color .45s ease;
                  border-left:0 solid var(--rouge);border-radius:0}
.sujet-sec.actif,.sujet-sec.alt.actif{z-index:6;overflow:visible;
  clip-path:none;   /* sinon la découpe diagonale coupe le relief et l'ombre */
  margin-top:0;padding-top:2.5rem;padding-bottom:2.5rem}
.sujet-sec.actif .bande{background:#fff;border-left:6px solid var(--rouge);
                        border-radius:0 12px 12px 0;
                        transform:translateY(-14px) scale(1.015);
                        box-shadow:0 30px 70px rgba(12,22,40,.20)}
.sujet-sec.actif .sujet-num{-webkit-text-stroke-color:transparent;
                            color:rgba(200,16,46,.13)}
.sujet-sec.attenue{opacity:.35}   /* sans filtre : desaturer deux blocs pleine largeur coutait un gros ralenti a la premiere ouverture */
/* marqueurs d'état actif indépendants de l'ombre : fond, filet et titre */
.sujet-sec.actif{background:#fff}
.sujet-sec.alt.actif{background:#fff}
.sujet-sec.actif .sujet-txt{position:relative;padding-left:1.4rem}
.sujet-sec.actif .sujet-txt::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;
                                    width:5px;background:var(--rouge);border-radius:3px}
.sujet-sec.actif h2{color:var(--marine)}
.sujet-sec.actif .eyebrow{color:var(--rouge)}

/* ---- contenu déplié ---- */
.sujet-detail{max-height:0;overflow:hidden;
              transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .4s ease;opacity:0}
.sujet-sec.actif .sujet-detail{max-height:1800px;opacity:1}
.detail-in{padding-top:1.6rem;margin-top:1.6rem;border-top:2px solid var(--rouge)}
/* grille a filets : deux colonnes, aucun encadre, un simple trait entre les blocs */
.detail-blocs{margin-top:.2rem;display:grid;grid-template-columns:repeat(2,1fr);
              gap:0 3rem;counter-reset:bloc}
.detail-bloc{background:none;border:none;border-top:1px solid var(--brume);border-radius:0;
             padding:1.05rem 0 1.15rem;display:grid;grid-template-columns:3.4rem 1fr;
             column-gap:.6rem;align-items:start}
/* le numero evide : meme signature que les grands chiffres de section */
/* le zero de Plex Mono est pointe ; on ecrit la lettre O a la place : meme glyphe que
   le O du filigrane IMMOVALEUR, meme largeur en monospace, aucun point */
.detail-bloc::before{counter-increment:bloc;content:"O" counter(bloc);
             grid-row:1 / span 2;font-family:var(--font-mono);font-weight:500;
             font-size:2.3rem;line-height:1;letter-spacing:.04em;color:transparent;
             -webkit-text-stroke:1.4px var(--marine);transition:-webkit-text-stroke-color .25s}
.detail-bloc:nth-child(n+10)::before{content:counter(bloc)}
.detail-bloc:hover::before{-webkit-text-stroke-color:var(--rouge)}
.detail-bloc h3{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
                text-transform:uppercase;color:var(--rouge-cta);margin:.35rem 0 .35rem}
.detail-bloc p{font-size:.94rem;font-weight:300;line-height:1.6;margin:0;max-width:none;color:#3d4643}
@media (max-width:820px){ .detail-blocs{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .sujet-sec,.sujet-sec .bande,.sujet-detail{transition:none}
}
@media (max-width:820px){ .sujet-num{font-size:7.5rem;top:auto;bottom:1rem;transform:none}
  /* en ecran etroit, le 02 rejoint le coin bas droit comme 01 et 03 : a gauche, il couvrait le bouton */
  .sujet-sec.alt .sujet-num{left:auto;right:3vw} }

/* coupe diagonale entre « Parlons de votre projet » (marine) et « Bâtissons » (blanc) */
.soustraitants{position:relative;z-index:1;
               clip-path:polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
               margin-top:-4vw;padding-top:4vw}

/* --- aiguillage : carte d'action numérotée --- */
.aiguillage{counter-reset:aig}
.aiguillage .aig{
  position:relative;border-radius:0;border:1px solid var(--brume);border-left:none;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
  padding-top:3.1rem;background:#fff;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.aiguillage .aig::before{
  counter-increment:aig;content:"0" counter(aig);
  position:absolute;top:1.2rem;left:1.6rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
  color:#fff;background:var(--rouge-cta);padding:.3rem .6rem;border-radius:2px}
.aiguillage .aig:hover,.aiguillage .aig:focus-within{
  transform:translateY(-6px);border-color:var(--rouge);
  box-shadow:0 16px 36px rgba(12,22,40,.13)}

/* ---- « EN SAVOIR PLUS » qui appelle le clic ---- */
.sujet-lien{position:relative;padding:.72rem 1.15rem;border:1px solid rgba(200,16,46,.35);
            border-radius:0;overflow:hidden;
            clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
            transition:color .28s ease,border-color .28s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.sujet-lien::before{content:"";position:absolute;inset:0;background:var(--rouge);
                    transform:scaleX(0);transform-origin:left;z-index:-1;
                    transition:transform .34s cubic-bezier(.22,1,.36,1)}
.sujet-lien > *{position:relative}
.sujet-lien:hover,.sujet-lien:focus-visible{color:#fff;border-color:var(--rouge);transform:none}
.sujet-lien:hover::before,.sujet-lien:focus-visible::before{transform:scaleX(1)}
.sujet-lien:hover .chev{transform:translateX(5px)}
.sujet-lien .chev{transition:transform .3s cubic-bezier(.22,1,.36,1)}

/* le grand chiffre s'allume quand le bouton (ou la section) est survolé */
.sujet-num{transition:-webkit-text-stroke-color .45s ease,color .45s ease,
                      transform .55s cubic-bezier(.22,1,.36,1),opacity .45s ease}
.sujet-sec:hover .sujet-num{-webkit-text-stroke-color:rgba(23,63,115,.3);
                            transform:translateY(-50%) scale(1.04)}
.sujet-sec.alt:hover .sujet-num{-webkit-text-stroke-color:rgba(200,16,46,.28)}
.sujet-sec:has(.sujet-lien:hover) .sujet-num,
.sujet-sec:has(.sujet-lien:focus-visible) .sujet-num{
  -webkit-text-stroke-color:var(--rouge);color:rgba(200,16,46,.10);
  transform:translateY(-50%) scale(1.09)}
.sujet-sec.alt:has(.sujet-lien:hover) .sujet-num,
.sujet-sec.alt:has(.sujet-lien:focus-visible) .sujet-num{
  -webkit-text-stroke-color:var(--rouge);color:rgba(200,16,46,.10)}
@media (max-width:820px){
  .sujet-sec:hover .sujet-num,.sujet-sec:has(.sujet-lien:hover) .sujet-num{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .sujet-lien,.sujet-lien::before,.sujet-num,.sujet-lien .chev{transition:none}
}

/* ================= OPTION B : bleu alterné + ancrage rouge ================= */

/* 02, Gestion de projet passe en bande marine */
#sujet-gestion{background:var(--marine);color:#e9efe9}
#sujet-gestion::before{background:linear-gradient(200deg,rgba(255,255,255,.08),rgba(255,255,255,0) 65%)}
#sujet-gestion:not(.actif) h2{color:#fff}
#sujet-gestion:not(.actif) p{color:rgba(233,239,233,.85)}
#sujet-gestion:not(.actif) .eyebrow{color:rgba(255,255,255,.75);font-weight:700;letter-spacing:.2em}
#sujet-gestion:not(.actif) .eyebrow::before{content:"";display:inline-block;width:24px;height:3px;background:var(--rouge);
  vertical-align:middle;margin-right:.7em}
#sujet-gestion:not(.actif) .sujet-num{-webkit-text-stroke-color:rgba(255,255,255,.26)}
#sujet-gestion:not(.actif):hover .sujet-num{-webkit-text-stroke-color:rgba(255,255,255,.5)}
#sujet-gestion:not(.actif) .sujet-lien{color:#fff;border-color:rgba(255,255,255,.45)}
/* le chiffre s'allume quand même en rouge au survol du bouton */
#sujet-gestion:has(.sujet-lien:hover) .sujet-num,
#sujet-gestion:has(.sujet-lien:focus-visible) .sujet-num{
  -webkit-text-stroke-color:var(--rouge);color:rgba(200,16,46,.14)}

/* Affiliations : gris clair plutôt que blanc */
.partenaires{background:var(--beton)}

/* ================= « Bâtir ensemble » : l'ancrage rouge de la page ================
   La section Contact a été retirée : c'est ce bloc d'action qui ferme la page.     */
.soustraitants{border-top:none;color:#fff;overflow:hidden;
  background:linear-gradient(150deg,#B81029 0%,#A50D24 46%,#8C0A1E 100%)}
/* voile diagonal : donne du relief au rouge plat */
.soustraitants::after{content:"";position:absolute;top:-20%;right:-10%;bottom:-20%;width:46%;
  background:linear-gradient(200deg,rgba(255,255,255,.10),rgba(255,255,255,0) 62%);
  transform:skewX(-11deg);pointer-events:none}
.soustraitants .bande{position:relative;z-index:1}

.soustraitants .eyebrow{color:#ffd2d8}
.soustraitants h2{color:#fff;font-size:clamp(2rem,4vw,3rem)}
.soustraitants h2::after{background:#fff}
.soustraitants .st-texte{color:rgba(255,255,255,.9);font-size:1.05rem}

/* --- cartes blanches franches sur le rouge, accent bleu sur le numéro --- */
.soustraitants .aiguillage{margin-top:3.2rem}
.soustraitants .aig{background:#fff;color:var(--graphite);border:none;
  border-top:3px solid var(--marine);padding:3.4rem 1.6rem 1.7rem;
  box-shadow:0 10px 26px rgba(60,0,10,.18)}
.soustraitants .aig::before{background:var(--marine);color:#fff;
  top:0;left:1.6rem;border-radius:0 0 3px 3px;padding:.42rem .68rem}
.soustraitants .aig b{color:var(--marine)}
.soustraitants .aig span{color:#4a5350}
.soustraitants .aig em{color:var(--rouge);margin-top:.7rem}
.soustraitants .aig:hover,.soustraitants .aig:focus-within{
  border-top-color:var(--rouge);transform:translateY(-7px);
  box-shadow:0 22px 44px rgba(60,0,10,.3)}
.soustraitants .aig:hover::before,.soustraitants .aig:focus-within::before{
  background:var(--rouge)}
.soustraitants .aig:hover em,.soustraitants .aig:focus-within em{
  color:var(--rouge-cta);letter-spacing:.16em}

  /* icone Facebook dans les coordonnees : pleine, pas en trait comme les autres */
  .coord .ligne svg.plein{fill:currentColor;stroke:none}

  /* ---------- banniere de consentement aux temoins ----------
     Bande basse, jamais modale : la page reste utilisable. Les deux boutons
     ont la meme taille et le meme rang, un seul clic chacun : Loi 25 et CNIL
     exigent que refuser soit aussi simple qu'accepter. N'existe que lorsque
     SITE.analytiqueId est rempli. */
  .temoins{position:fixed;left:0;right:0;bottom:0;z-index:65;
           display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
           padding:1.1rem 4vw;padding-bottom:max(1.1rem,env(safe-area-inset-bottom));
           background:var(--marine);color:#fff;border-top:3px solid var(--rouge);
           box-shadow:0 -12px 40px rgba(12,22,40,.25);
           transform:translateY(105%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .temoins.visible{transform:none}
  .temoins p{margin:0;font-weight:300;font-size:.95rem;line-height:1.55;max-width:66ch;flex:1 1 34ch}
  .temoins a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
  .temoins a:hover,.temoins a:focus-visible{text-decoration-color:var(--rouge);text-decoration-thickness:2px}
  .temoins-choix{display:flex;gap:.7rem;flex:0 0 auto}
  .temoins button{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;
                  min-height:46px;padding:0 1.5rem;border-radius:4px;cursor:pointer;
                  transition:background .2s,border-color .2s,color .2s}
  .temoins-oui{background:var(--rouge-cta);color:#fff;border:1px solid var(--rouge-cta)}
  .temoins-oui:hover,.temoins-oui:focus-visible{background:#83091c;border-color:#83091c}
  .temoins-refus{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
  .temoins-refus:hover,.temoins-refus:focus-visible{border-color:#fff;background:rgba(255,255,255,.1)}
  .temoins :focus-visible{outline-color:#fff}
  @media (max-width:820px){
    .temoins{padding:1rem 5vw}
    .temoins-choix{width:100%}
    .temoins button{flex:1}
  }
  @media (prefers-reduced-motion:reduce){ .temoins{transition:none} }