/* ==========================================================================
   D&L IMMO — V5 — composants des PAGES INTÉRIEURES
   --------------------------------------------------------------------------
   Ce fichier ne remplace rien : il s'ajoute à `styles.css`, qui reste le
   socle (couleurs, typographies, rythme, .caps, .titre, .chapo, .lien,
   .metier, .manquant, .formulaire…). On ne redéfinit AUCUN token ici.

   Pourquoi un fichier séparé plutôt que d'allonger styles.css :
   la V4 est une page unique validée ; si le client renonce aux pages
   intérieures, on retire ce fichier et la V4 est intacte.

   UGO : les réglages propres aux pages sont dans le bloc :root ci-dessous.
   ========================================================================== */

:root{
  --tete-hauteur: clamp(360px, 58vh, 620px);   /* bandeau image en tête de page */
  /* Opacité du voile LÀ OÙ LE TEXTE SE POSE (bas du bandeau), pas au sommet.
     Réglée à .78 après vérification à l'écran : à .42, le titre crème
     disparaissait purement et simplement sur la façade blanche de Castle Bay.
     Ne pas descendre sous .70 : les couvertures de ce dossier sont des villas
     blanches en plein soleil, c'est le pire cas pour du texte clair. */
  --tete-voile:   .78;
  --carte-ratio:  4 / 3;                        /* format des cartes illustrées */
}

/* ==========================================================================
   1. TÊTE DE PAGE
   Une image plein cadre, le titre posé dessus. C'est le seul moment
   spectaculaire d'une page intérieure : tout le reste est calme.
   ========================================================================== */
.tete{
  position:relative;
  height:var(--tete-hauteur);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--encre);
}
.tete__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.6s var(--courbe);
}
.tete.vu .tete__img{ transform:scale(1) }
.tete__voile{
  position:absolute; inset:0;
  background:linear-gradient(to top,
              rgba(14,14,13,calc(var(--tete-voile) + .14)) 0%,
              rgba(14,14,13,var(--tete-voile))             42%,
              rgba(14,14,13,calc(var(--tete-voile) * .42)) 74%,
              rgba(14,14,13,calc(var(--tete-voile) * .16)) 100%);
}
.tete__texte{
  position:relative; z-index:2; width:100%;
  padding-bottom:clamp(38px,5vw,72px);
  color:var(--craie);
}
.tete__texte .caps{ color:var(--gris-clair) }
.tete h1{
  font-family:var(--display); font-weight:200;
  font-size:var(--display1); color:var(--craie);
  max-width:18ch;
}
.tete__chapo{
  color:var(--gris-clair); font-weight:300;
  max-width:56ch; margin:clamp(18px,2vw,26px) 0 0;
}

/* Variante sans photo (pages dont on n'a AUCUNE image légitime).
   On assume le fond encre plutôt que d'habiller avec une photo
   qui ne représenterait pas l'activité.
   Le retrait haut n'est pas décoratif : l'en-tête est en `position:fixed`
   sous le bandeau de maquette et descend à ~150 px. Sans ce dégagement,
   le titre passe DERRIÈRE le logo sur les petits écrans. */
.tete--nue{
  height:auto;
  padding:clamp(190px, 24vh, 280px) 0 calc(var(--section) * .55);
}
.tete--nue .tete__voile{ display:none }
.tete--nue .tete__texte{ padding-bottom:0 }

/* Les deux boutons du héros (§9 : DÉCOUVRIR NOS PROPRIÉTÉS · NOUS CONTACTER) */
.heros__actions{
  display:flex; flex-wrap:wrap; gap:18px 40px;
  margin-top:clamp(24px,3vw,36px);
  color:var(--blanc);
}

/* ==========================================================================
   2. SOUS-NAVIGATION D'UNE PAGE
   Les rubriques du CDC ont beaucoup de sous-rubriques : sans ce fil,
   on perd le lecteur au troisième écran.
   ========================================================================== */
/* 31px = hauteur du bandeau de maquette, comme `.entete` dans styles.css.
   z-index 40 : volontairement SOUS l'en-tête (100). En descendant, l'en-tête
   se dérobe et la barre d'ancres reste seule visible ; en remontant,
   l'en-tête repasse devant — c'est l'ordre attendu. */
.ancres{
  position:sticky; top:31px; z-index:40;
  background:rgba(244,242,238,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}
.ancres__interieur{
  display:flex; gap:clamp(20px,3vw,40px);
  overflow-x:auto; scrollbar-width:none;
  padding-top:16px; padding-bottom:16px;
}
.ancres__interieur::-webkit-scrollbar{ display:none }
.ancres a{
  white-space:nowrap;
  font-size:var(--mini); letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; color:var(--gris);
  padding-bottom:4px; position:relative;
  transition:color var(--duree-court) var(--courbe);
}
.ancres a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--duree-court) var(--courbe);
}
.ancres a:hover{ color:var(--encre) }
.ancres a:hover::after,
.ancres a[aria-current="page"]::after{ transform:scaleX(1) }
.ancres a[aria-current="page"]{ color:var(--encre) }

/* ==========================================================================
   3. GRILLE DE SOUS-RUBRIQUES
   Le cœur du nouveau cahier des charges : chaque rubrique se décompose
   en listes. Traitées en filets et non en cartes à ombre — c'est le geste
   anti-Airbnb déjà tranché sur la V2.
   ========================================================================== */
/* MÉCANIQUE DES FILETS — attention, c'est contre-intuitif.
   La méthode habituelle (fond gris sur le conteneur + gap de 1px) laisse une
   PLAQUE GRISE VIDE dès que le nombre d'items ne remplit pas la dernière
   ligne : six sous-rubriques sur quatre colonnes, et il reste deux cases
   grises au milieu de la page. Constaté à l'écran le 04/09/2026.
   Ici, le conteneur est transparent et chaque bloc porte lui-même son filet
   (box-shadow de 1px, qui ne prend pas de place dans la grille). Les filets
   de deux blocs voisins tombent dans le même pixel d'écart : on obtient un
   trait net, et les cases manquantes n'existent tout simplement pas. */
.sous{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:1px; background:transparent;
}

.sous__item{
  background:var(--craie);
  box-shadow:0 0 0 1px var(--trait);
  padding:clamp(28px,3vw,40px) clamp(24px,2.4vw,34px);
  display:flex; flex-direction:column; gap:12px;
  position:relative; overflow:hidden;
  transition:background var(--duree-court) var(--courbe);
}
.sombre .sous__item{ background:var(--encre); box-shadow:0 0 0 1px var(--trait-sombre) }
.sous__item:hover{ background:var(--blanc) }
.sombre .sous__item:hover{ background:var(--encre-2) }

.sous__num{
  font-family:var(--display); font-size:var(--mini); font-weight:400;
  letter-spacing:.16em; color:var(--laiton);
  font-variant-numeric:tabular-nums;
}
.sous__item h3{
  font-family:var(--display); font-size:1.24rem; font-weight:300;
  letter-spacing:-.015em; line-height:1.2;
}
.sombre .sous__item h3{ color:var(--craie) }
.sous__item p{
  color:var(--gris); font-weight:300; font-size:var(--petit);
  margin:0; max-width:44ch;
}
.sous__item::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--laiton);
  transition:width var(--duree) var(--courbe);
}
.sous__item:hover::after{ width:100% }

/* variante compacte : une simple liste de mots, sans description */
.sous--mots{ grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)) }
.sous--mots .sous__item{ padding:clamp(20px,2.2vw,28px) clamp(20px,2vw,28px); gap:8px }
.sous--mots .sous__item h3{ font-size:1.06rem }

/* ==========================================================================
   4. BLOC TEXTE + IMAGE, EN ALTERNANCE
   ========================================================================== */
.duo-media{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,86px); align-items:center;
}
.duo-media--inverse .duo-media__texte{ order:2 }
.duo-media__img{
  aspect-ratio:var(--carte-ratio);
  width:100%; height:100%; object-fit:cover;
}
.duo-media__texte h2{ font-family:var(--display); font-size:var(--display1); font-weight:200 }
.duo-media__texte p{ color:var(--gris); font-weight:300; max-width:52ch }

/* ==========================================================================
   5. LES 6 BLOCS D'EXPERTISES DE LA PAGE D'ACCUEIL (§10, section 2)
   Demandés visuels : image + titre, le texte reste court.
   ========================================================================== */
.expertises{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--trait);
  border-top:1px solid var(--trait); border-bottom:1px solid var(--trait);
}
.expertise{
  position:relative; display:block;
  background:var(--encre); color:var(--craie);
  min-height:clamp(260px,30vw,380px);
  overflow:hidden;
}
.expertise__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.52; transform:scale(1.04);
  transition:opacity var(--duree) var(--courbe), transform 1.2s var(--courbe);
}
.expertise:hover .expertise__img{ opacity:.72; transform:scale(1) }
.expertise__texte{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:10px; padding:clamp(26px,2.6vw,38px);
  background:linear-gradient(to top, rgba(14,14,13,.82), rgba(14,14,13,0) 62%);
}
.expertise__num{
  font-family:var(--display); font-size:var(--mini); letter-spacing:.16em;
  color:var(--laiton); font-variant-numeric:tabular-nums;
}
.expertise h3{
  font-family:var(--display); font-size:var(--display2); font-weight:300;
  color:var(--craie);
}
.expertise p{
  font-size:var(--petit); font-weight:300; color:var(--gris-clair);
  margin:0; max-width:34ch;
}
.expertise__fleche{
  position:absolute; top:clamp(24px,2.4vw,34px); right:clamp(24px,2.4vw,34px);
  color:var(--craie); opacity:0; transform:translateX(-8px);
  transition:opacity var(--duree-court) var(--courbe), transform var(--duree-court) var(--courbe);
}
.expertise:hover .expertise__fleche{ opacity:1; transform:none }

/* ==========================================================================
   6. OFF-MARKET — la bande sombre demandée en section 4 de l'accueil
   ========================================================================== */
.offmarket{
  background:var(--encre); color:var(--craie);
  padding:var(--section) 0;
  position:relative; overflow:hidden;
}
.offmarket__interieur{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(34px,6vw,96px); align-items:end;
}
.offmarket h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.08;
  letter-spacing:-.01em; color:var(--craie); max-width:16ch;
}
.offmarket p{ color:var(--gris-clair); font-weight:300; max-width:46ch }
.offmarket .lien{ color:var(--craie) }

/* filet vertical discret, rappel du laiton */
.offmarket::before{
  content:""; position:absolute; left:var(--gouttiere); top:0; bottom:0;
  width:1px; background:linear-gradient(to bottom, transparent, var(--laiton), transparent);
  opacity:.5;
}

/* ==========================================================================
   7. INTERNATIONAL — zones géographiques
   PAS de carte du monde dessinée : nous n'avons AUCUNE opération à situer,
   une carte piquée de points inventés serait un mensonge visuel.
   On montre donc les zones, avec le nombre d'opérations laissé à remplir.
   ========================================================================== */
.monde{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,80px); align-items:center;
}
.monde__dessin{ width:100%; height:auto; color:var(--trait) }
.sombre .monde__dessin{ color:var(--trait-sombre) }
.monde__dessin .meridien{ fill:none; stroke:currentColor; stroke-width:1 }
/* Les quatre cercles de zone sont INVISIBLES au repos : affichés tous en même
   temps ils se chevauchaient et le motif devenait illisible (vu à l'écran le
   04/09/2026). Ils ne s'allument qu'au survol de la ligne correspondante —
   le dessin reste un globe sobre, et le geste devient lisible. */
.monde__dessin .zone{
  fill:none; stroke:var(--laiton); stroke-width:1.4;
  opacity:0; transition:opacity var(--duree-court) var(--courbe);
}
.monde__dessin .zone.est-active{ opacity:1 }
.monde__dessin .socle{ fill:var(--laiton); opacity:.9 }

.zones{ display:grid; gap:0; border-top:1px solid var(--trait) }
.sombre .zones{ border-color:var(--trait-sombre) }
.zone-ligne{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto;
  gap:22px; align-items:baseline;
  padding:22px 4px; border-bottom:1px solid var(--trait);
  text-align:left; background:none; border-left:0; border-right:0; border-top:0;
  width:100%; cursor:pointer; color:inherit; font:inherit;
  transition:padding var(--duree-court) var(--courbe);
}
.sombre .zone-ligne{ border-bottom-color:var(--trait-sombre) }
.zone-ligne:hover{ padding-left:16px }
.zone-ligne__num{
  font-family:var(--display); font-size:var(--mini); color:var(--laiton);
  letter-spacing:.16em; font-variant-numeric:tabular-nums;
}
.zone-ligne__nom{ font-family:var(--display); font-size:var(--display2); font-weight:300 }
.sombre .zone-ligne__nom{ color:var(--craie) }
.zone-ligne__note{
  font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris);
}
.sombre .zone-ligne__note{ color:var(--gris-clair) }

/* ==========================================================================
   8. FORMULAIRE À SÉLECTION DU BESOIN (§7 du cahier des charges)
   Les 7 besoins deviennent des pastilles ; le formulaire s'adapte ensuite.
   ========================================================================== */
.besoins{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 clamp(30px,4vw,46px); padding:0;
  border:0;
}
.besoins legend{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps);
  text-transform:uppercase; color:var(--gris); font-weight:500;
  margin-bottom:16px; padding:0; width:100%;
}
.besoin{ position:relative }
.besoin input{
  position:absolute; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer;
}
.besoin span{
  display:block; padding:11px 18px;
  border:1px solid var(--trait);
  font-size:var(--mini); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--gris);
  transition:border-color var(--duree-court) var(--courbe),
             color var(--duree-court) var(--courbe),
             background var(--duree-court) var(--courbe);
}
.besoin input:hover + span{ border-color:var(--gris) }
.besoin input:focus-visible + span{ outline:1px solid var(--laiton); outline-offset:3px }
.besoin input:checked + span{
  background:var(--encre); border-color:var(--encre); color:var(--craie);
}

/* champs qui n'apparaissent que pour certains besoins */
.champ-conditionnel[hidden]{ display:none !important }

/* rappel visuel de ce que le formulaire ne fait pas encore */
.formulaire__note{
  border-left:2px solid var(--laiton);
  padding:12px 0 12px 16px;
  font-size:var(--mini); color:var(--gris); line-height:1.65;
}

/* ==========================================================================
   9. LES ATOUTS / NOTRE EXPERTISE — 7 blocs numérotés
   ========================================================================== */
.atouts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--trait) }
.atout{
  background:var(--craie);
  padding:clamp(32px,3.4vw,52px);
  display:flex; flex-direction:column; gap:14px;
}
.atout__num{
  font-family:var(--serif); font-size:clamp(2.2rem,3.6vw,3.2rem);
  font-weight:300; line-height:.9; color:var(--laiton);
}
.atout h3{ font-family:var(--display); font-size:var(--display2); font-weight:300 }
.atout p{ color:var(--gris); font-weight:300; margin:0; max-width:48ch }
.atout--large{ grid-column:1 / -1 }

/* ==========================================================================
   10. CITATION / PHRASE-MANIFESTE
   Sert à porter « De l'acquisition au développement… ».
   ========================================================================== */
.manifeste{
  padding:var(--section) 0;
  border-top:1px solid var(--trait); border-bottom:1px solid var(--trait);
}
.manifeste p{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,3.4vw,2.9rem); line-height:1.22;
  letter-spacing:-.01em; color:var(--encre);
  max-width:22ch; margin:0;
}
.sombre .manifeste p{ color:var(--craie) }

/* ==========================================================================
   11. CHAÎNE DE VALEUR (§13 : ACQUISITION → … → INTERNATIONAL)
   ========================================================================== */
.chaine{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(10px,1.4vw,20px);
  font-size:var(--mini); letter-spacing:var(--interlettre-caps);
  text-transform:uppercase; font-weight:500; color:var(--gris);
}
.chaine span{ white-space:nowrap }
.chaine i{ font-style:normal; color:var(--laiton) }
.sombre .chaine{ color:var(--gris-clair) }

/* ==========================================================================
   12. APPEL FINAL DE PAGE
   ========================================================================== */
.appel{
  border-top:1px solid var(--trait);
  padding:clamp(58px,7vw,110px) 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:26px;
}
.appel h2{ font-family:var(--display); font-size:var(--display2); font-weight:300; max-width:22ch }

/* ==========================================================================
   11 bis. LES TROUS À REMPLIR
   --------------------------------------------------------------------------
   Trois sections de la page L'agence (histoire, équipe, réseau) sont
   entièrement rédigées SAUF les faits, que seule l'agence détient.
   Plutôt qu'un encart « à fournir » en bas de page — qu'on ne lit pas — le
   fait manquant est marqué À SA PLACE, dans la phrase.
   Le client ne lit plus « racontez-nous votre histoire » (personne ne répond
   à ça) mais « il manque ici une date » : il remplit.
   ⚠️ Ces marques doivent TOUTES disparaître avant la mise en ligne.
   ========================================================================== */
.trou{
  /* `inline`, pas `inline-block` : un trou long doit se couper en fin de ligne
     comme du texte. En inline-block il restait d'un bloc et rejetait à la ligne
     suivante la ponctuation qui le suit — on se retrouvait avec un point tout
     seul sur une ligne. `box-decoration-break:clone` redessine le cadre sur
     chaque morceau après la coupure. */
  display:inline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:1px 10px 2px;
  border:1px dashed var(--laiton);
  border-radius:1px;
  color:var(--laiton);
  font-size:.86em; font-weight:500;
  letter-spacing:.06em;
  line-height:1.5;
  background:rgba(154,127,82,.06);
}
.sombre .trou{ background:rgba(154,127,82,.12) }
.trou::before{ content:"⟨ " }
.trou::after{ content:" ⟩" }

/* bloc entier à fournir (une bio, un logo, une photo) */
.trou-bloc{
  border:1px dashed var(--laiton);
  background:rgba(154,127,82,.05);
  padding:clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column; gap:10px;
  min-height:150px; justify-content:center;
}
.trou-bloc__titre{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps);
  text-transform:uppercase; color:var(--laiton); font-weight:500;
}
.trou-bloc p{ font-size:var(--petit); color:var(--gris); font-weight:300; margin:0 }

/* la fiche d'une personne : le portrait est un trou tant qu'il n'est pas fourni */
.equipe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(26px,3vw,44px) }
.equipe__portrait{ aspect-ratio:4 / 5; margin-bottom:22px }
.equipe__nom{ font-family:var(--display); font-size:var(--display2); font-weight:300 }
.equipe__role{
  font-size:var(--mini); letter-spacing:var(--interlettre-caps);
  text-transform:uppercase; color:var(--gris); font-weight:500; margin:8px 0 14px;
}
.equipe p{ color:var(--gris); font-weight:300; font-size:var(--petit); max-width:40ch }

/* ==========================================================================
   11 ter. ÉTIQUETTES DPE / GES
   --------------------------------------------------------------------------
   Une annonce immobilière doit afficher les deux étiquettes, énergie et climat.
   Le composant est construit MAINTENANT, vide : les sept crans sont dessinés et
   attendent une lettre. Le jour où l'agence envoie les diagnostics, on remplit
   une colonne du tableau et tout s'allume — il n'y a plus de développement.
   Vit à l'intérieur de la fiche, qui est sur fond encre.
   ========================================================================== */
.dpe{ display:grid; gap:22px; margin-top:26px }
.dpe__bloc{ display:grid; gap:9px }
.dpe__titre{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris);
}
.dpe__echelle{ display:flex; gap:3px; align-items:stretch }
.dpe__cran{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center;
  padding:7px 0;
  font-size:.72rem; font-weight:500; letter-spacing:.08em;
  color:var(--gris);
  background:rgba(255,255,255,.05);
  border:1px solid var(--trait-sombre);
  transition:background var(--duree-court) var(--courbe), color var(--duree-court) var(--courbe);
}
.dpe__cran.est-actif{
  background:var(--laiton); border-color:var(--laiton); color:var(--encre); font-weight:600;
}
.dpe__valeur{
  font-size:.82rem; color:var(--gris-clair); font-weight:300;
}
.dpe--vide .dpe__valeur{ color:var(--laiton) }

/* avertissement « passoire thermique » : n'apparaît que pour les classes F et G */
.dpe__alerte{
  font-size:.78rem; color:var(--laiton); letter-spacing:.04em; line-height:1.55;
}

/* le bandeau de réserve légale, en pied de fiche */
.fiche__legal{
  max-width:1500px; margin-inline:auto;
  padding:0 clamp(16px,5vw,72px);
  margin-top:clamp(26px,3vw,40px);
}
.fiche__legal .manquant{ margin:0 }

/* ==========================================================================
   12 bis. ARRIVÉE SUR UNE ANCRE
   Sans ça, un lien « #gestion » colle le titre de la section sous la barre
   d'ancres et sous l'en-tête : on atterrit au milieu d'un paragraphe.
   ========================================================================== */
section[id],
[id].tete{ scroll-margin-top:120px }

/* ==========================================================================
   13. RESPONSIVE
   Le rendu mobile n'avait jamais été testé sur la V4 : ici il est prévu
   dès l'écriture, pas rattrapé après coup.
   ========================================================================== */
/* Le menu de la V4 avait 5 entrées et basculait en plein écran à 900 px.
   La V5 en a 7 plus le téléphone : à 1000 px les libellés se chevauchent.
   On remonte donc le point de bascule à 1100 px, en reprenant exactement le
   traitement plein écran de `styles.css` pour que rien ne diverge. */
@media (max-width:1100px){
  .menu{
    position:fixed; inset:0; background:var(--encre); color:var(--craie);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:22px; padding:0 var(--gouttiere); margin:0;
    clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--courbe);
  }
  .menu.est-ouvert{ clip-path:inset(0 0 0 0) }
  .menu a{ font-size:1.32rem; letter-spacing:.04em; text-transform:none; font-weight:300 }
  .declic{ display:block; z-index:110; position:relative }
}

@media (max-width:1024px){
  .expertises{ grid-template-columns:repeat(2,1fr) }
  .duo-media,
  .monde,
  .offmarket__interieur{ grid-template-columns:1fr }
  .duo-media--inverse .duo-media__texte{ order:0 }
  .atouts{ grid-template-columns:1fr }
}
@media (max-width:680px){
  .expertises{ grid-template-columns:1fr }
  .tete h1{ font-size:clamp(2rem,9vw,2.8rem) }
  .zone-ligne{ grid-template-columns:32px minmax(0,1fr); gap:14px }
  .zone-ligne__note{ grid-column:2 }
  .appel{ flex-direction:column; align-items:flex-start }
}

/* impression : on ne veut pas gaspiller l'encre du client */
@media print{
  .ancres,.entete,.appel,.offmarket::before{ display:none }
  .tete{ height:auto; color:var(--encre) }
}