/* =========================================================
   Maison Motors - feuille de style unique
   Palette noir / or, d'apres la maquette du 03/09/2026.
   Couleurs relevees au pixel sur maquette.png :
   fond (2,5,8), or (202,163,105), or clair (232,206,150),
   texte doux (200,204,205), libelles gris (128,129,131).
   ========================================================= */

:root{
  --noir:#04070a;
  --noir-2:#080b0f;
  --noir-3:#0d1116;
  --noir-4:#020406;
  --carte:rgba(255,255,255,.022);
  --carte-bord:rgba(201,162,103,.22);
  --or:#c9a267;
  --or-clair:#e6cd97;
  --or-pale:#f4e5bd;
  --or-sombre:#7d6335;
  --texte:#f5f6f6;
  --texte-doux:#c2c6c8;
  --texte-faible:#7d8184;
  --ligne:rgba(255,255,255,.085);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1420px;
  --pad:clamp(1.25rem,3vw,2.6rem);
  --entete:108px;
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}

/* la marge de defilement suit la hauteur reelle de l'en-tete fixe (108 px, 84 px
   sous 1180 px) : a 96 px fixes, l'en-tete recouvrait le haut de la cible visee. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 14px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--noir);
  color:var(--texte);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit;text-decoration:none}

h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:400}
h1,h2{font-family:var(--serif)}
h3,h4{font-family:var(--sans);font-weight:600}
p{margin:0}

::selection{background:var(--or);color:#0b0906}

:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}

.contenu{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.sr-only:focus{
  position:fixed;top:.7rem;left:.7rem;z-index:99;width:auto;height:auto;
  clip:auto;margin:0;padding:.8rem 1.2rem;background:var(--or);color:#0b0906;font-weight:600;
}

/* ---------- vocabulaire commun ---------- */

.surtitre{
  font-size:.79rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);margin:0 0 1.2rem;
}

.titre-section{font-size:clamp(1.9rem,3.6vw,3.05rem);margin:0 0 1.1rem;letter-spacing:-.005em}
.chapeau{color:var(--texte-doux);font-size:1.03rem;max-width:62ch}

.filet{width:64px;height:1px;background:var(--or);margin:0 0 1.5rem}

section{position:relative}

.section{padding-block:clamp(3.8rem,8vw,7rem)}
.section--sombre{background:var(--noir-2)}

.entete-section{margin-bottom:clamp(2.2rem,4.5vw,3.6rem);max-width:70ch}
.entete-section--centre{margin-inline:auto;text-align:center}
.entete-section--centre .filet{margin-inline:auto}
.entete-section--centre .chapeau{margin-inline:auto}

/* ---------- boutons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  font-family:var(--sans);font-size:.8rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  padding:1.15rem 2.1rem;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn svg{width:17px;height:17px;flex-shrink:0}

.btn--or{background:#c6a064;color:#12100b;border-color:#c6a064}
.btn--or:hover{background:var(--or-clair);border-color:var(--or-clair);transform:translateY(-1px)}

.btn--cadre{background:transparent;color:var(--or-clair);border-color:var(--or-sombre)}
.btn--cadre:hover{border-color:var(--or);background:rgba(201,162,103,.08)}

.btn--contour{background:rgba(255,255,255,.02);color:var(--texte);border-color:rgba(255,255,255,.24)}
.btn--contour:hover{border-color:var(--or);color:var(--or-clair)}

.btn--large{width:100%}

/* bouton rond + libelle, comme la deuxieme action du heros */
.action-ronde{
  display:inline-flex;align-items:center;gap:1.1rem;
  font-size:.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--texte);
  transition:color .22s;
}
.action-ronde__rond{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--or-sombre);
  display:grid;place-items:center;color:var(--or);flex-shrink:0;
  transition:border-color .25s,background .25s;
}
.action-ronde__rond svg{width:16px;height:16px;transition:transform .25s}
.action-ronde:hover{color:var(--or-clair)}
.action-ronde:hover .action-ronde__rond{border-color:var(--or);background:rgba(201,162,103,.1)}
.action-ronde:hover .action-ronde__rond svg{transform:translateX(2px)}

/* lien texte a fleche */
.lien-fleche{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or);transition:color .22s;
}
.lien-fleche svg{width:17px;height:17px;transition:transform .25s}
.lien-fleche:hover{color:var(--or-clair)}
.lien-fleche:hover svg{transform:translateX(5px)}

/* ---------- en-tete ---------- */

.entete{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(4,7,10,0);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.entete.est-collee{
  background:rgba(4,7,10,.94);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--ligne);
}
.entete__barre{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,1.6vw,1.6rem);
  min-height:var(--entete);
}
.entete .btn{white-space:nowrap}

/* marque : monogramme du logo reel (image PNG detouree, 1x et 2x) */
.marque{display:flex;align-items:center;gap:1.1rem}
.marque__logo{display:block;flex-shrink:0;line-height:0}
.marque__signe{width:38px;height:39px}
.marque__mots{display:block}
.marque__nom{
  display:block;font-size:1.05rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:#fff;line-height:1;white-space:nowrap;
}
.marque__metier{
  display:block;margin-top:.55rem;font-size:.66rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--or);line-height:1;white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,2.1rem)}
.nav a{
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;padding-block:.5rem;position:relative;white-space:nowrap;transition:color .22s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.nav a:hover{color:var(--or-clair)}
.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--texte)}
.burger svg{width:26px;height:26px}

/* Tailles resserrees de l'en-tete. Elles etaient sous @media (max-width:1440px),
   ce qui les coupait au-dela de 1440 px : or `.contenu` est plafonne a 1420 px,
   donc la barre n'a JAMAIS plus de place a 1920 px qu'a 1440 px, alors que les
   corps, eux, remontaient. Mesure de l'ecart entre le bas du nom de la marque et
   le premier lien de navigation : 1440 px -> 134,9 px ; 1441 -> 18,8 (et les mots
   de la marque debordent deja de 4,3 px leur propre lien) ; 1500 -> 10,7 ;
   1600 -> -2,9, « Maison Motors » recouvre « Accueil » ; 1800 et 1920 -> -12,4 px,
   avec 38 px de debordement. Somme des trois blocs a 1600 px, tailles non
   resserrees : 232 + 806,8 + 275,6 + 51,2 d'ecarts = 1365,6 px pour 1336,8 px
   disponibles, il manque 28,8 px. Les regles s'appliquent donc a toutes les
   largeurs : au-dessus de 1440 px l'en-tete rend desormais exactement ce que rend
   un ecran de 1440 px, et 1440 / 1280 / 1200 ne bougent pas d'un pixel.
   (Defaut anterieur a la refonte mobile : rien ici ne depend du bloc de reduction.) */
.nav{gap:1.15rem}
.nav a{font-size:.73rem;letter-spacing:.06em}
.marque__nom{font-size:.95rem;letter-spacing:.2em}
.entete .btn{padding:.95rem 1.2rem;font-size:.68rem;letter-spacing:.08em}
@media (max-width:1180px){
  .nav,.entete .btn{display:none}
  .burger{display:block}
  .entete{
    background:rgba(4,7,10,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom-color:var(--ligne);
  }
  .entete__barre{min-height:84px}
  :root{--entete:84px}
}

/* menu mobile */
.menu-mobile{
  position:fixed;inset:0;z-index:70;background:var(--noir);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad);overflow-y:auto;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.7,0,.2,1),visibility .4s;
  /* menu ferme : sorti de l'ecran ET retire du parcours de tabulation. Sans
     « visibility », ses dix liens restent focalisables alors qu'ils portent
     aria-hidden="true" : le clavier disparaissait dans du contenu invisible. */
  visibility:hidden;
}
.menu-mobile[data-ouvert="true"]{transform:translateY(0);visibility:visible}
.menu-mobile__fermer{
  position:absolute;top:20px;right:var(--pad);
  background:none;border:0;color:var(--texte);cursor:pointer;padding:.5rem;
}
.menu-mobile__fermer svg{width:28px;height:28px}
.menu-mobile nav{display:flex;flex-direction:column}
.menu-mobile nav a{
  font-family:var(--serif);font-size:1.55rem;padding-block:.6rem;
  border-bottom:1px solid var(--ligne);
}
.menu-mobile nav a:last-child{border-bottom:0}
.menu-mobile .btn{margin-top:2rem}
.menu-mobile__tel{
  margin-top:1.3rem;display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:1.1rem;font-weight:500;color:var(--or);
}
.menu-mobile__tel svg{width:18px;height:18px}

/* ---------- heros ---------- */

.heros{position:relative;overflow:hidden}
.heros__image{position:absolute;inset:0;z-index:0}
.heros__image img{width:100%;height:100%;object-fit:cover;object-position:58% 52%}
.heros__voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(4,7,10,.97) 0%,rgba(4,7,10,.9) 26%,rgba(4,7,10,.5) 48%,rgba(4,7,10,.1) 72%,rgba(4,7,10,0) 100%),
    linear-gradient(0deg,rgba(4,7,10,.94) 0%,rgba(4,7,10,.4) 22%,rgba(4,7,10,0) 46%),
    linear-gradient(180deg,rgba(4,7,10,.8) 0%,rgba(4,7,10,0) 20%);
}

.heros__corps{
  position:relative;z-index:2;width:100%;
  min-height:100svh;display:flex;flex-direction:column;
  padding-top:var(--entete);padding-bottom:clamp(1.6rem,3vw,2.8rem);
}
.heros__haut{flex:1;display:flex;align-items:center;padding-block:clamp(2rem,5vh,4rem)}
.heros__texte{max-width:min(46rem,54vw)}

.heros h1{
  font-size:clamp(2.35rem,5.4vw,5.2rem);line-height:.98;letter-spacing:.002em;
  text-transform:uppercase;margin:0 0 1.6rem;
}
.heros h1 .or{color:var(--or)}
/* Les trois lignes du titre sont celles de la maquette : elles valent a toutes
   les largeurs. Reduit, le titre garde donc la silhouette de trois lignes du
   grand ecran au lieu de se recomposer au fil de la place disponible. */
.heros h1 .ligne{display:block}

.heros__accroche{
  color:#dcdfe0;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.62;
  max-width:28rem;margin-bottom:2.6rem;
}
.heros__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.6rem}

/* ---------- panneau des quatre atouts (dans le heros) ---------- */

.atouts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(13,17,22,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--ligne);
}
.atout{
  display:flex;align-items:center;gap:1.5rem;
  padding:1.9rem clamp(1.2rem,1.8vw,1.9rem);
  position:relative;
}
.atout::after{
  content:"";position:absolute;right:0;top:24%;bottom:24%;width:1px;background:var(--ligne);
}
.atout:last-child::after{display:none}
.atout__ico{width:46px;height:46px;color:var(--or);flex-shrink:0}
.atout__corps{min-width:0}
.atout h3{
  font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin:0 0 .5rem;
}
.atout p{color:var(--texte-doux);font-size:.92rem;line-height:1.42}


/* ---------- bande d'engagements (bas du heros) ---------- */

.engagements{
  display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);
  padding-top:clamp(1.6rem,2.6vw,2.4rem);
}
.engagements__phare{flex-shrink:0}
.engagements__phare strong{
  display:block;font-family:var(--serif);font-size:clamp(1.35rem,1.9vw,1.75rem);
  font-weight:400;color:#fff;line-height:1.1;
}
.engagements__phare span{
  display:block;margin-top:.6rem;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);
}
.engagements__trait{width:1px;align-self:stretch;background:var(--or-sombre);flex-shrink:0}
.engagements__libelle{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texte-faible);line-height:1.7;flex-shrink:0;
}
.engagements__liste{
  list-style:none;margin:0;padding:0;flex:1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:.7rem clamp(1rem,2.2vw,2.4rem);
}
/* les cinq libelles tiennent sur une seule ligne a partir de 1520 px : c'est
   la seule largeur ou la repartition de la maquette (bord a bord) est tenable */
@media (min-width:1520px){
  .engagements__liste{justify-content:space-between}
}
.engagements__liste li{
  font-size:clamp(.66rem,.85vw,.76rem);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#8f9497;white-space:nowrap;
}


/* ---------- bande defilante ---------- */

.bande{
  overflow:hidden;background:var(--noir-2);
  border-block:1px solid var(--ligne);padding-block:1.1rem;
}
.bande__piste{display:flex;width:max-content;animation:defile 38s linear infinite}
.bande:hover .bande__piste{animation-play-state:paused}
.bande__lot{display:flex;align-items:center;flex-shrink:0}
.bande__lot span{
  font-size:.73rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--or);
  padding-inline:1.6rem;white-space:nowrap;
}
.bande__lot i{width:4px;height:4px;background:var(--or-sombre);border-radius:50%;display:block;flex-shrink:0}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .bande__piste{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .bande__lot:last-child{display:none}
  /* Le lot restant est une rangee de quatre libelles en white-space:nowrap et
     flex-shrink:0 : il garde donc sa largeur de contenu quoi qu'il arrive. Elle
     vaut 786,7 px, quand la bande n'en fait que 375 sur un telephone : 411,7 px
     etaient coupes par l'overflow:hidden et un libelle sur quatre disparaissait
     (mesure a 375 et a 414 px ; a 768 px il manquait encore 77,5 px). Le lot
     doit donc pouvoir se plier lui aussi. Au-dessus de 1000 px il tient deja sur
     une ligne : sa largeur mesuree y est inchangee, 882,7 px a 1000 et 1058 a
     1440, la bande du bureau ne bouge pas. */
  .bande__lot{flex-wrap:wrap;justify-content:center;max-width:100%;flex-shrink:1}
}

/* ---------- reserves d'image ---------- */
/* Bloc d'attente aux dimensions exactes de la photo a venir : la page garde sa
   composition tant que l'image n'existe pas. Voir A-COMPLETER.md. */

.reserve{
  position:relative;display:grid;place-items:center;align-content:center;gap:.75rem;
  background:
    linear-gradient(135deg,rgba(201,162,103,.07),rgba(201,162,103,0) 55%),
    var(--noir-3);
  border:1px dashed rgba(201,162,103,.3);
  color:var(--texte-faible);text-align:center;padding:1.2rem;overflow:hidden;
}
.reserve::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.016) 0 12px,rgba(255,255,255,0) 12px 24px);
}
.reserve svg{width:30px;height:30px;color:rgba(201,162,103,.55)}
.reserve span{
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  max-width:22ch;line-height:1.5;
}
.section--sombre .reserve{background:linear-gradient(135deg,rgba(201,162,103,.07),rgba(201,162,103,0) 55%),var(--noir);}

/* ---------- services ---------- */

.services__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.3rem,2.2vw,2rem)}

.service{
  display:flex;flex-direction:column;
  border:1px solid var(--ligne);background:var(--carte);
  overflow:hidden;transition:border-color .3s,transform .3s;
}
.service:hover{border-color:var(--carte-bord);transform:translateY(-3px)}
.service__visuel{aspect-ratio:16/10;width:100%}
.service__corps{padding:clamp(1.6rem,2.4vw,2.2rem);display:flex;flex-direction:column;flex:1}
.service__tete{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.service__tete svg{width:32px;height:32px;color:var(--or);flex-shrink:0}
.service h3{font-family:var(--serif);font-weight:400;font-size:1.5rem}
.service p{color:var(--texte-doux);font-size:.96rem;margin-bottom:1.5rem}
.service ul{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.75rem}
.service li{display:flex;gap:.75rem;align-items:flex-start;font-size:.93rem;color:var(--texte-doux)}
.service li svg{width:16px;height:16px;color:var(--or);flex-shrink:0;margin-top:.3rem}
.service .lien-fleche{margin-top:auto;align-self:flex-start}

/* ---------- deroule en quatre etapes ---------- */

.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
.etape{background:var(--noir);padding:clamp(1.6rem,2.6vw,2.2rem);transition:background .3s}
.section--sombre .etape{background:var(--noir-2)}
.section--sombre .etape:hover{background:var(--noir-3)}
.etape:hover{background:var(--noir-3)}
.etape__ico{display:block;width:26px;height:26px;color:var(--or);margin-bottom:1.4rem}
.etape__tete{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.8rem}
.etape__num{font-family:var(--serif);font-size:2.2rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--or-sombre)}
.etape h3{font-family:var(--serif);font-weight:400;font-size:1.25rem}
.etape p{color:var(--texte-doux);font-size:.94rem}

.note{
  display:flex;gap:1rem;align-items:flex-start;
  margin-top:2.2rem;padding:1.4rem 1.6rem;
  border:1px solid var(--carte-bord);background:rgba(201,162,103,.045);
}
.note svg{width:22px;height:22px;color:var(--or);flex-shrink:0;margin-top:.2rem}
.note p{color:var(--texte-doux);font-size:.95rem}
.note strong{color:var(--texte);font-weight:600}

/* ---------- vehicules d'exception ---------- */

.vitrine{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.vitrine__liste{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem}
.vitrine__liste li{display:flex;gap:.9rem;align-items:flex-start;color:var(--texte-doux);font-size:.98rem}
.vitrine__liste svg{width:18px;height:18px;color:var(--or);flex-shrink:0;margin-top:.32rem}

.vignettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.4vw,1.2rem)}
.vignettes .reserve{aspect-ratio:4/3}

/* ---------- le garage ---------- */

.garage{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.garage .reserve{aspect-ratio:4/5}
.garage__liste{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.4rem}
.garage__liste li{display:flex;gap:1.1rem;align-items:flex-start}
.garage__liste svg{width:24px;height:24px;color:var(--or);flex-shrink:0;margin-top:.15rem}
.garage__liste strong{display:block;font-size:1.02rem;font-weight:600;margin-bottom:.2rem}
.garage__liste p{color:var(--texte-doux);font-size:.94rem}

/* ---------- avis ---------- */

.avis{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.avis .reserve{aspect-ratio:1/1}
.avis__cartes{display:grid;gap:1.1rem;margin-top:2rem}
.avis__attente{
  display:flex;align-items:center;gap:1.1rem;
  border:1px dashed rgba(201,162,103,.28);background:rgba(255,255,255,.02);
  padding:1.35rem 1.5rem;
}
.avis__attente svg{width:26px;height:26px;color:rgba(201,162,103,.6);flex-shrink:0}
.avis__attente span{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-faible)}

/* ---------- questions ---------- */

.questions{max-width:900px;margin-inline:auto}
.question{border-bottom:1px solid var(--ligne)}
.question summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:1.22rem;transition:color .22s;
}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--or-clair)}
.question__signe{position:relative;width:15px;height:15px;flex-shrink:0}
.question__signe::before,.question__signe::after{content:"";position:absolute;background:var(--or);transition:transform .3s}
.question__signe::before{top:7px;left:0;width:15px;height:1px}
.question__signe::after{left:7px;top:0;width:1px;height:15px}
.question[open] .question__signe::after{transform:scaleY(0)}
.question__corps{padding:0 0 1.6rem;color:var(--texte-doux);font-size:.98rem;max-width:74ch}
.question__corps p+p{margin-top:.9rem}

/* ---------- contact ---------- */

.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.4rem,5vw,4.5rem)}

.contact__voies{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.4rem}
.contact__voies li{display:flex;gap:1.1rem;align-items:flex-start}
.contact__voies svg{width:21px;height:21px;color:var(--or);flex-shrink:0;margin-top:.35rem}
.contact__voies span{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texte-faible);margin-bottom:.2rem;
}
.contact__voies a,.contact__voies p{font-size:1.05rem;color:var(--texte)}
.contact__voies a:hover{color:var(--or-clair)}

.form{display:grid;gap:1.25rem}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.champ{display:grid;gap:.5rem}
.champ label{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-faible)}
.champ input,.champ select,.champ textarea{
  width:100%;background:rgba(255,255,255,.035);color:var(--texte);
  border:1px solid var(--ligne);border-radius:var(--r);
  padding:.95rem 1.05rem;font-family:var(--sans);font-size:.98rem;font-weight:400;
  transition:border-color .25s,background .25s;
}
.champ textarea{min-height:132px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);background:rgba(255,255,255,.06);
}
.champ select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#c9a267 50%),linear-gradient(135deg,#c9a267 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.champ select option{background:var(--noir-3);color:var(--texte)}
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__mention{font-size:.8rem;color:var(--texte-faible);line-height:1.6}
.form__etat{font-size:.92rem;color:var(--or-clair);min-height:1.4em}

/* ---------- pied de page ---------- */

.pied{border-top:1px solid var(--ligne);background:var(--noir-4);padding-block:3.5rem 2rem}
.pied__haut{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;
  padding-bottom:2.5rem;border-bottom:1px solid var(--ligne);
}
.pied .marque{margin-bottom:1.3rem}
.pied p{color:var(--texte-doux);font-size:.92rem;max-width:42ch}
.pied h4{
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or);margin:0 0 1.1rem;
}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pied ul a{font-size:.92rem;color:var(--texte-doux);transition:color .22s}
.pied ul a:hover{color:var(--texte)}
.pied__bas{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;padding-top:1.8rem}
.pied__bas p,.pied__bas a{font-size:.8rem;color:var(--texte-faible)}
.pied__bas a:hover{color:var(--texte-doux)}

/* ---------- apparition au defilement ---------- */

.js .apparait{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .apparait.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1;transform:none;transition:none}
}

/* ---------- page annexe ---------- */

.page-texte{padding-block:clamp(8rem,15vh,11rem) clamp(4rem,8vw,6rem)}
.page-texte h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:2rem}
.page-texte h2{font-family:var(--serif);font-size:1.45rem;margin:2.6rem 0 .9rem;color:var(--or-clair)}
.page-texte p,.page-texte li{color:var(--texte-doux);font-size:.98rem}
.page-texte p+p{margin-top:.8rem}
.page-texte ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:.6rem 0 0}
.page-texte a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
.page-texte .bloc{max-width:78ch}

/* =========================================================
   LA MEME PAGE, EN REDUCTION
   ---------------------------------------------------------
   Ecran de reference : 1280 px de large, donc 1 vw = 12,8 px.
   Chaque valeur ci-dessous est la mesure relevee sur ce grand ecran,
   divisee par 12,8 et ecrite en vw. A n'importe quelle largeur la page
   garde donc la composition du bureau : le titre pose sur la photo a
   gauche, la rangee de quatre atouts, la bande d'engagements, trois
   services de front, quatre etapes de front, texte et image cote a cote,
   quatre colonnes de pied de page. Rien n'est reorganise, tout est mis
   a l'echelle.

   PLANCHER EN PIXELS dans chaque clamp() : sans lui, a 375 px, 1,15vw
   tomberait a 4,3 px. Le plancher est a 11 px pour tout texte courant.
   minmax(0,1fr) sur toutes les grilles : sans lui un mot insecable
   impose sa largeur a la colonne et pousse la grille hors de l'ecran.

   Ce bloc doit rester en fin de feuille : plusieurs @media plus haut
   portent les memes selecteurs et, a specificite egale, c'est le
   dernier qui gagne.
   ========================================================= */
@media (max-width:1180px){

  .contenu{padding-inline:3vw}
  .section{padding-block:clamp(26px,8vw,102.4px)}

  /* ---------- vocabulaire commun ---------- */
  /* interlettrage ramene de .2em a .1em : a 11 px, ce sont les 2,2 px
     poses entre chaque lettre, et non le corps, qui faisaient sortir le
     sur-titre de la colonne du heros. */
  .surtitre{font-size:clamp(11px,.9875vw,12.64px);letter-spacing:.1em;margin-bottom:clamp(7px,1.5vw,19.2px)}
  .titre-section{font-size:clamp(13.5px,3.6vw,46.08px);margin-bottom:clamp(6px,1.375vw,17.6px)}
  .chapeau{font-size:clamp(11px,1.2875vw,16.48px)}
  .filet{width:clamp(16px,5vw,64px);margin-bottom:clamp(8px,1.875vw,24px)}
  .entete-section{margin-bottom:clamp(16px,4.5vw,57.6px)}

  /* ---------- boutons ---------- */
  .btn{
    font-size:clamp(11px,1vw,12.8px);letter-spacing:.08em;
    gap:clamp(5px,1vw,12.8px);
    padding:clamp(8px,1.4375vw,18.4px) clamp(10px,2.625vw,33.6px);
  }
  .btn svg{width:clamp(11px,1.33vw,17px);height:clamp(11px,1.33vw,17px)}
  .action-ronde{font-size:clamp(11px,1vw,12.8px);letter-spacing:.08em;gap:clamp(7px,1.375vw,17.6px)}
  .action-ronde__rond{width:clamp(26px,3.75vw,48px);height:clamp(26px,3.75vw,48px)}
  .action-ronde__rond svg{width:clamp(11px,1.25vw,16px);height:clamp(11px,1.25vw,16px)}
  .lien-fleche{font-size:clamp(11px,.95vw,12.16px);letter-spacing:.07em;gap:clamp(5px,.875vw,11.2px)}
  .lien-fleche svg{width:clamp(11px,1.33vw,17px);height:clamp(11px,1.33vw,17px)}

  /* ---------- en-tete ----------
     Seule zone ou l'architecture change pour de bon : les sept entrees de
     la navigation ne tiennent plus, le menu deroulant prend le relais.
     C'est le mecanisme deja prevu par la page, on n'y touche pas ; on
     remet seulement le libelle du metier au-dessus du plancher de 11 px. */
  .marque__metier{font-size:11px}

  /* ---------- heros ----------
     Aucun changement de composition : la photo occupe tout le cadre, le
     voile la fonce a gauche, et le texte reste POSE DESSUS, bride a la
     meme part de largeur qu'au bureau (54vw). */
  .heros__corps{padding-bottom:clamp(12px,3vw,38.4px)}
  .heros .surtitre{margin-bottom:clamp(6px,1.25vw,16px)}
  .heros h1{font-size:clamp(19px,5.4vw,69.12px);margin-bottom:clamp(9px,2vw,25.6px)}
  .heros__accroche{
    font-size:clamp(11px,1.15vw,17.6px);line-height:1.5;
    max-width:35vw;margin-bottom:clamp(12px,3.25vw,41.6px);
  }
  .heros__actions{gap:clamp(8px,1.75vw,22.4px) clamp(10px,3.25vw,41.6px)}

  /* ---------- rangee de quatre atouts ----------
     Elle reste une rangee de quatre, ET elle garde l'icone A GAUCHE du texte,
     comme au bureau, jusqu'a 700 px. Le passage de l'icone au-dessus est une
     recomposition, pas une reduction : il ne se justifie que la ou l'icone a
     gauche ne laisse plus la place au mot le plus long. Mesure du mot le plus
     long des quatre atouts (« accompagnement », 86,2 px a 11 px dans Barlow ;
     93,8 px dans la pile de repli, +8,8 %, ce que voit tout visiteur tant que
     Barlow n'est pas chargee) contre la largeur de texte restante, icone a
     gauche : 1180 px -> 169,8 px dispo ; 900 -> 129,4 ; 768 -> 110,4 ;
     700 -> 100,6 ; 660 -> 94,8 ; 640 -> 91,9 ; 600 -> 86,1. La composition du
     bureau tient donc jusqu'a 700 px avec 6,8 px de marge dans le pire cas, et
     cesse de tenir vers 640. Le basculement est pose a 700 px (bloc plus bas). */
  .atouts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .atout{
    gap:clamp(5px,1.875vw,24px);
    padding:clamp(10px,2.375vw,30.4px) clamp(7px,1.8vw,23.04px);
  }
  .atout__ico{width:clamp(20px,3.59vw,46px);height:clamp(20px,3.59vw,46px)}
  .atout h3{font-size:clamp(11px,1.075vw,13.76px);letter-spacing:.04em;margin-bottom:clamp(3px,.625vw,8px)}
  .atout p{font-size:clamp(11px,1.15vw,14.72px);line-height:1.4}

  /* ---------- bande d'engagements ----------
     Les quatre zones gardent la part de largeur qu'elles ont au bureau
     (188,9 / 1 / 143,4 / 754,8 px a 1280, soit 14,76 / 11,2 / 58,96 vw) :
     la bande reste une rangee, jamais une colonne. */
  .engagements{gap:clamp(6px,3vw,38.4px);padding-top:clamp(10px,2.6vw,33.28px)}
  .engagements__trait{display:block}
  /* Un plancher en pixels sur la LARGEUR des deux zones de libelle, exactement
     comme le plancher de 11 px sur le corps du texte : au-dessus de 570 px la
     part du bureau (14,76vw) l'emporte et la bande est une pure reduction ; en
     dessous, la zone s'arrete a la largeur du mot le plus long
     (INTERVENTION, 81,6 px ; PRENONS, 52,5 px) au lieu de le couper. */
  .engagements__phare{flex:0 1 14.76vw;min-width:84px}
  .engagements__phare strong{font-size:clamp(13px,1.9vw,24.32px)}
  .engagements__phare span{font-size:clamp(11px,.9vw,11.52px);letter-spacing:.06em;margin-top:clamp(3px,.75vw,9.6px)}
  .engagements__libelle{flex:0 1 11.2vw;min-width:55px;font-size:clamp(11px,.9vw,11.52px);letter-spacing:.06em;line-height:1.4}
  .engagements__liste{flex:1 1 58.96vw;min-width:0;gap:clamp(4px,.875vw,11.2px) clamp(6px,2.2vw,28.16px)}
  .engagements__liste li{font-size:clamp(11px,.85vw,12.16px);letter-spacing:.05em;white-space:normal}

  /* ---------- bande defilante ---------- */
  .bande{padding-block:clamp(7px,1.375vw,17.6px)}
  .bande__lot span{font-size:clamp(11px,.9125vw,11.68px);letter-spacing:.16em;padding-inline:clamp(8px,2vw,25.6px)}

  /* ---------- reserves d'image ----------
     Interligne ramene de 1,5 a 1,25 : dans la plus petite vignette, le
     libelle tient sur deux lignes au lieu de trois et le bloc cesse de
     depasser sa boite en 4:3. */
  .reserve{padding:clamp(3px,1.5vw,19.2px);gap:clamp(2px,.9375vw,12px)}
  .reserve svg{width:clamp(11px,2.34vw,30px);height:clamp(11px,2.34vw,30px)}
  .reserve span{font-size:11px;letter-spacing:.06em;line-height:1.25}

  /* ---------- services : trois de front ---------- */
  .services__grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2.2vw,28.16px)}
  .service__corps{padding:clamp(8px,2.4vw,30.72px)}
  /* flex-wrap : sous 330 px environ, l'icone et le titre ne tiennent plus sur
     la meme ligne dans une colonne de 94 px (13 + 4 + 71 px pour 78 px
     disponibles) ; le titre passe sous l'icone au lieu de sortir de la carte. */
  .service__tete{flex-wrap:wrap;gap:clamp(4px,1vw,12.8px);margin-bottom:clamp(6px,1.375vw,17.6px)}
  .service__tete h3{min-width:0}
  .service__tete svg{width:clamp(13px,2.5vw,32px);height:clamp(13px,2.5vw,32px)}
  .service h3{font-size:clamp(12px,1.875vw,24px)}
  .service p{font-size:clamp(11px,1.2vw,15.36px);margin-bottom:clamp(8px,1.875vw,24px)}
  /* minmax(0,1fr) sur toutes les listes en grille : sans lui, la piste prend la
     largeur du mot le plus long (« refroidissement », 76 px, plus l'icone et
     son ecart : 89 px pour une carte qui en offre 79 a 320 px) et l'element
     sort de sa carte. */
  .service ul,.vitrine__liste,.garage__liste,.avis__cartes,.contact__voies,
  .form,.champ,.pied ul{grid-template-columns:minmax(0,1fr)}
  .service ul{margin-bottom:clamp(9px,2.25vw,28.8px);gap:clamp(4px,.9375vw,12px)}
  .service li{font-size:clamp(11px,1.1625vw,14.88px);gap:clamp(4px,.9375vw,12px);line-height:1.4}
  .service li svg{width:clamp(9px,1.25vw,16px);height:clamp(9px,1.25vw,16px);margin-top:clamp(1px,.375vw,4.8px)}

  /* ---------- encadres de note ---------- */
  .note{
    margin-top:clamp(10px,2.75vw,35.2px);gap:clamp(5px,1vw,12.8px);
    padding:clamp(8px,1.75vw,22.4px) clamp(9px,2vw,25.6px);
  }
  .note svg{width:clamp(12px,1.72vw,22px);height:clamp(12px,1.72vw,22px);margin-top:clamp(1px,.2vw,3.2px)}
  .note p{font-size:clamp(11px,1.1875vw,15.2px);line-height:1.45}

  /* ---------- deroule : quatre etapes de front ---------- */
  .etapes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .etape{padding:clamp(7px,2.6vw,33.28px)}
  .etape__ico{width:clamp(13px,2.03vw,26px);height:clamp(13px,2.03vw,26px);margin-bottom:clamp(7px,1.75vw,22.4px)}
  /* flex-wrap : en dessous d'environ 700 px, le numero et le titre ne
     tiennent plus sur la meme ligne dans une colonne de 88 px ; le titre
     passe sous le numero au lieu de se briser en trois morceaux. */
  .etape__tete{flex-wrap:wrap;gap:clamp(4px,1.125vw,14.4px);margin-bottom:clamp(5px,1vw,12.8px)}
  .etape__tete h3{min-width:0}
  .etape__num{font-size:clamp(15px,2.75vw,35.2px)}
  .etape h3{font-size:clamp(12px,1.5625vw,20px)}
  .etape p{font-size:clamp(11px,1.175vw,15.04px);line-height:1.45}

  /* ---------- vehicules d'exception : texte a gauche, vignettes a droite ---------- */
  .vitrine{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(8px,4.5vw,57.6px)}
  .vitrine__liste{margin-top:clamp(10px,2vw,25.6px);gap:clamp(6px,1.375vw,17.6px)}
  .vitrine__liste li{font-size:clamp(11px,1.225vw,15.68px);gap:clamp(5px,1.125vw,14.4px);line-height:1.4}
  .vitrine__liste svg{width:clamp(10px,1.4vw,18px);height:clamp(10px,1.4vw,18px);margin-top:clamp(1px,.4vw,5.12px)}
  /* la marge du bouton est posee en style en ligne dans le HTML : on la met
     a l'echelle sans toucher au HTML */
  .vitrine p[style]{margin-top:clamp(10px,2.75vw,35.2px)!important}
  .vignettes{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(3px,1.4vw,17.92px)}
  /* les six vignettes sont les plus petites reserves de la page : leur marge
     interieure et l'ecart icone-libelle sont resserres (1vw et .7vw au lieu de
     1,5vw et .94vw) pour garder trois colonnes le plus bas possible. */
  .vignettes .reserve{padding:clamp(2px,1vw,12.8px);gap:clamp(2px,.7vw,9px)}

  /* ---------- le garage : portrait a gauche, texte a droite ---------- */
  .garage{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(8px,4.5vw,57.6px)}
  .garage__liste{margin-top:clamp(10px,2vw,25.6px);gap:clamp(7px,1.75vw,22.4px)}
  .garage__liste li{gap:clamp(5px,1.375vw,17.6px)}
  .garage__liste svg{width:clamp(11px,1.875vw,24px);height:clamp(11px,1.875vw,24px);margin-top:clamp(1px,.2vw,2.4px)}
  .garage__liste strong{font-size:clamp(11px,1.275vw,16.32px);margin-bottom:clamp(1px,.25vw,3.2px)}
  .garage__liste p{font-size:clamp(11px,1.175vw,15.04px);line-height:1.45}

  /* ---------- avis : texte a gauche, photo a droite ---------- */
  .avis{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(8px,4.5vw,57.6px)}
  .avis__cartes{margin-top:clamp(10px,2vw,25.6px);gap:clamp(6px,1.375vw,17.6px)}
  .avis__attente{gap:clamp(5px,1.375vw,17.6px);padding:clamp(7px,1.6875vw,21.6px) clamp(8px,1.875vw,24px)}
  .avis__attente svg{width:clamp(11px,2.03vw,26px);height:clamp(11px,2.03vw,26px)}
  .avis__attente span{font-size:clamp(11px,.9vw,11.52px);letter-spacing:.06em;line-height:1.3}

  /* ---------- questions : la colonne garde sa largeur relative (900/1280) ---------- */
  .questions{max-width:70.31vw}
  .question summary{font-size:clamp(12px,1.525vw,19.52px);padding-block:clamp(8px,1.875vw,24px);gap:clamp(6px,1.875vw,24px)}
  .question__signe{width:clamp(9px,1.17vw,15px);height:clamp(9px,1.17vw,15px)}
  /* les traits du signe etaient poses a 7 px et 15 px fixes : reduits, ils
     sortaient du carre. En pourcentage ils suivent sa taille reelle. */
  .question__signe::before{top:calc(50% - .5px);left:0;width:100%;height:1px}
  .question__signe::after{left:calc(50% - .5px);top:0;width:1px;height:100%}
  .question__corps{font-size:clamp(11px,1.225vw,15.68px);padding-bottom:clamp(8px,2vw,25.6px);line-height:1.5}
  .question__corps p+p{margin-top:clamp(5px,1.125vw,14.4px)}

  /* ---------- contact : texte a gauche, formulaire a droite ---------- */
  .contact{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(8px,5vw,64px)}
  .contact__voies{margin-top:clamp(10px,2.75vw,35.2px);gap:clamp(7px,1.75vw,22.4px)}
  .contact__voies li{gap:clamp(5px,1.375vw,17.6px)}
  .contact__voies svg{width:clamp(10px,1.64vw,21px);height:clamp(10px,1.64vw,21px);margin-top:clamp(2px,.35vw,5.6px)}
  .contact__voies span{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.06em}
  /* l'adresse de courriel est un mot de 19 signes : sans coupure elle sort
     de sa colonne */
  .contact__voies a,.contact__voies p{font-size:clamp(11px,1.3125vw,16.8px);overflow-wrap:anywhere}

  .form{gap:clamp(6px,1.5625vw,20px)}
  .form__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(6px,1.5625vw,20px)}
  .champ{gap:clamp(3px,.625vw,8px)}
  .champ label{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.05em;line-height:1.3}
  .champ input,.champ select,.champ textarea{
    padding:clamp(5px,1.1875vw,15.2px) clamp(6px,1.3125vw,16.8px);
    font-size:clamp(11px,1.225vw,15.68px);
  }
  .champ textarea{min-height:clamp(60px,10.31vw,132px)}
  .champ select{
    background-position:calc(100% - clamp(8px,1.48vw,19px)) 50%,calc(100% - clamp(5px,1.09vw,14px)) 50%;
    /* la fleche est un fond, pas un caractere : sans cette reserve a droite le
       libelle de l'option passe dessous des que la colonne se resserre */
    padding-right:clamp(16px,2.6vw,33.3px);
  }
  .form__mention{font-size:clamp(11px,1vw,12.8px);line-height:1.45}
  .form__etat{font-size:clamp(11px,1.15vw,14.72px)}

  /* ---------- pied de page : quatre colonnes ---------- */
  .pied{padding-block:clamp(16px,4.375vw,56px) clamp(10px,2.5vw,32px)}
  .pied__haut{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(7px,3.125vw,40px);padding-bottom:clamp(12px,3.125vw,40px);
  }
  /* la marque du pied vit dans une colonne de 106 px a 375 px : le
     monogramme et les mots s'y empilent, et les mots reviennent a la ligne
     au lieu de sortir de la colonne (ils portent white-space:nowrap). */
  .pied .marque{flex-wrap:wrap;gap:clamp(5px,1.375vw,17.6px);margin-bottom:clamp(6px,1.625vw,20.8px)}
  .pied .marque__signe{width:clamp(20px,2.97vw,38px);height:auto}
  .pied .marque__nom{font-size:clamp(11px,1.19vw,15.2px);letter-spacing:.06em;white-space:normal}
  .pied .marque__metier{font-size:11px;letter-spacing:.06em;white-space:normal;margin-top:clamp(2px,.43vw,5.5px)}
  .pied p{font-size:clamp(11px,1.15vw,14.72px);line-height:1.45}
  .pied h4{font-size:clamp(11px,.875vw,11.2px);letter-spacing:.05em;margin-bottom:clamp(6px,1.375vw,17.6px);line-height:1.3}
  .pied ul{gap:clamp(4px,.875vw,11.2px)}
  .pied ul a{font-size:clamp(11px,1.15vw,14.72px);line-height:1.3;display:inline-block;overflow-wrap:anywhere}
  .pied__bas{padding-top:clamp(8px,2.25vw,28.8px);gap:clamp(5px,1vw,12.8px) clamp(8px,2.5vw,32px)}
  /* base de 48 % : les deux mentions restent sur la MEME ligne qu'au
     bureau, au lieu de se mettre l'une sous l'autre */
  .pied__bas p{font-size:clamp(11px,1vw,12.8px);flex:0 1 48%;line-height:1.4}
  .pied__bas p:last-child{text-align:right}

  /* ---------- page annexe (mentions legales) ---------- */
  .page-texte{padding-block:clamp(96px,15vh,176px) clamp(26px,8vw,102.4px)}
  .page-texte h1{font-size:clamp(15px,5vw,64px);margin-bottom:clamp(10px,2.5vw,32px)}
  .page-texte h2{font-size:clamp(13px,1.8125vw,23.2px);margin:clamp(12px,3.25vw,41.6px) 0 clamp(5px,1.125vw,14.4px)}
  .page-texte p,.page-texte li{font-size:clamp(11px,1.225vw,15.68px);line-height:1.5}
  .page-texte p+p{margin-top:clamp(5px,1vw,12.8px)}
  .page-texte ul{gap:clamp(4px,.625vw,8px);padding-left:clamp(9px,1.5vw,19.2px)}
}

/* ---- telephone : la meme composition, mais les gouttieres se resserrent
   et la cesure est autorisee la ou un mot depasse sa colonne.
   Mesures a 375 px : la colonne d'un atout offre 74,6 px de texte, quand
   PERFORMANCE en mesure 82 et « accompagnement » 77 ; la colonne d'un
   libelle d'engagement en offre 44, quand INTERVENTION en mesure 90.
   La cesure est le dernier echelon avant de casser la rangee : on s'y
   arrete, les quatre colonnes restent quatre. ---- */
/* ---- vignettes : le seul endroit ou une rangee perd une colonne ----
   Mesure, a 375 px et a trois colonnes : la vignette fait 55,2 x 41,4 px,
   soit 42,0 x 26,2 px utiles. Son libelle le plus long, RESTITUTION, mesure
   72,9 px au plancher de 11 px : il tient sur deux lignes cesurees (27,5 px)
   auxquelles s'ajoutent l'icone (11 px) et l'ecart (3,5 px), soit 42 px pour
   26,2 px disponibles. Le corps est deja au plancher, la marge interieure
   deja resserree a 1vw et la cesure deja autorisee : il ne reste que la
   colonne. Trois colonnes tiennent jusqu'a 460 px (verifie tous les 5 px de
   460 a 530) ; en dessous de 470 px elles passent a deux, jamais a une.
   La contrainte vient du libelle d'attente, pas de la photo : quand les six
   images reelles remplaceront les reserves, trois colonnes tiendront partout. */
@media (max-width:470px){
  .vignettes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 471 a 600 px : les trois colonnes reviennent, il faut leur en donner
   les moyens ----
   Juste au-dessus du seuil, la vignette est la plus petite de toute la page et
   son libelle tient tout juste. Mesure de la place restante sous l'icone, une
   fois le libelle pose sur ses deux lignes : 471 px -> 0,80 px ; 480 -> 1,34 ;
   490 -> 1,93 ; 510 -> 3,14 ; 540 -> 4,94. A 471 px, Chrome arrondit la ligne
   et « Diagnostic » comme « Restitution » sont rognes de 1 px (mesure faite
   avec Barlow chargee ; dans la pile de repli, « Freinage » deborde en plus de
   3 px en largeur). Trois colonnes qui rognent leur texte ne valent pas mieux
   qu'un empilement : on descend donc l'icone, l'ecart et l'interligne aux
   valeurs deja retenues sous 375 px, ce qui porte la marge a 10,6 px a 471 px
   sans toucher a la composition ni au plancher de 11 px du corps du texte.
   Au-dessus de 600 px le libelle tient sur une seule ligne, la marge passe a
   22 px et ces reglages n'ont plus lieu d'etre. */
@media (min-width:471px) and (max-width:600px){
  .vignettes .reserve{padding:2px;gap:2px}
  .vignettes .reserve svg{width:9px;height:9px}
  .vignettes .reserve span{line-height:1.2}
}

/* ---- sous 375 px ----
   A 320 px la reserve d'un service ne fait plus que 95,6 x 59,7 px en 16:10,
   soit 44,5 px utiles en hauteur, quand son libelle d'attente demande trois
   lignes. Le corps reste a 11 px : ce sont la marge interieure, l'ecart
   icone-libelle, la taille de l'icone et l'interligne qui cedent.
   Interligne a 1,15 et non 1,2 : a 1,2 il restait 1,50 px de place a 320 px,
   que l'arrondi de ligne de Chrome transformait en 1 px de rognage sur les
   trois libelles (« Photo a venir : entretien / reparation / performance »).
   A 1,15 la marge passe a 3,2 px et plus rien n'est coupe. */
@media (max-width:374px){
  .reserve{padding:clamp(2px,1vw,12.8px);gap:2px}
  .reserve svg{width:9px;height:9px}
  .reserve span{line-height:1.15;letter-spacing:.04em}
}

/* ---------- heros : photo entiere sur telephone ----------
   Au bureau la photo est un fond en object-fit:cover, cadre par la hauteur du
   heros. Sur un ecran etroit et haut, ce rognage ne laissait qu'un gros plan de
   la voiture. Constat de Sebastien, 06/09/2026 : « l'image derriere est un peu
   trop restreinte comparee a ce qu'on peut avoir sur ordinateur, ca fait un peu
   bizarre ». Le fichier carre servi jusqu'ici sous 760 px zoomait encore
   davantage : il a ete retire du <picture>, la page sert desormais le meme
   fichier paysage qu'au bureau.
   Photo, voile et contenu passent dans LA MEME cellule de grille, cales en haut,
   selon la recette du projet peinture : la photo est servie ENTIERE, a son
   rapport naturel, aucun rognage ; le texte reste pose dessus et poursuit sous
   elle sur le fond de page, qui est la meme couleur que le bas du voile.
   Le voile prend le rapport de la photo pour l'epouser exactement, au lieu de
   couvrir toute la section. */
@media (max-width:760px){
  .heros{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
  .heros__image,.heros__voile,.heros__corps{grid-area:1/1}
  .heros__image{position:relative;inset:auto;align-self:start;z-index:0}
  /* object-fit:fill sur une boite au rapport naturel : aucune deformation, et le
     controle « rapport affiche = rapport naturel » porte reellement sur l'image */
  .heros__image img{width:100%;height:auto;object-fit:fill;object-position:center}
  .heros__voile{position:relative;inset:auto;align-self:start;width:100%;aspect-ratio:1536/1024;height:auto}
  .heros__corps{min-height:0;align-self:start}
  .heros__haut{align-items:flex-start}
}

@media (max-width:700px){
  /* Mesures a 375 px, dans la police du site :
     - colonne d'un atout : 74,6 px utiles ; PERFORMANCE en mesure 80 et
       « accompagnement » 86,2 ;
     - zone du repere d'engagement : 55 px ; INTERVENTION en mesure 81,6 ;
     - zone du libelle : 42 px ; PRENONS en mesure 52,5 ;
     - vignette : 72 px ; RESTITUTION en mesure 72,9.
     Partout ailleurs le mot le plus long tient dans sa colonne : la cesure
     n'y est pas posee, elle couperait des mots sans necessite. */
  /* Icone AU-DESSUS du texte : c'est ici, et pas plus haut, que l'icone posee a
     gauche cesse de laisser la place au mot le plus long. A 700 px la colonne
     d'un atout offre encore 100,6 px de texte, icone comprise, pour un
     « accompagnement » qui en mesure 93,8 dans la pile de repli ; a 640 px elle
     n'en offre plus que 91,9. En dessous de ce seuil, l'icone a gauche
     couperait les titres : elle passe au-dessus. */
  .atout{flex-direction:column;align-items:flex-start}

  .atout h3,.atout p,
  .engagements__phare span,.engagements__libelle,.engagements__liste li,
  .reserve span{
    -webkit-hyphens:auto;hyphens:auto;
    /* seuls les mots d'au moins dix lettres se coupent : sans cette limite
       Chrome coupe aussi « origine » ou « selection », qui tiennent pourtant
       dans leur colonne. Les mots reellement trop longs (PERFORMANCE 11,
       accompagnement 14, INTERVENTION 12, RESTITUTION 11) restent couverts. */
    hyphenate-limit-chars:10 4 3;
  }
  .engagements__phare span,.engagements__libelle{letter-spacing:.03em}
}

/* Sous 490 px, le numero d'etape et son titre ne tiennent plus sur la meme
   ligne : « Le rendez-vous » mesure 67,6 px, le numero et son ecart 21,2, pour
   une colonne qui n'en offre que 68,6. Le numero prend alors toute la ligne
   pour les QUATRE etapes, au lieu d'un rendu ou seul « 03 Le devis », plus
   court, resterait aligne autrement que ses voisines. */
@media (max-width:489px){
  .etape__num{flex:0 0 100%}
}

/* Sous 375 px seulement : les colonnes perdent encore 15 % et quelques mots
   longs finissent par depasser. Au-dessus, ces regles sont sans effet. */
@media (max-width:374px){
  .service h3,.service li,.vitrine__liste li,.garage__liste strong,
  .garage__liste p,.pied h4,.pied ul a,.champ label,.etape h3{
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 3;
  }
}

@media print{
  .entete,.menu-mobile,.bande,.reserve{display:none}
  body{background:#fff;color:#000}
}

/* Photos livrees le 08/09/2026 : la case reservee garde sa geometrie, l'image la remplit. */
.photo-remplie{border:0!important;background:none!important;padding:0!important;overflow:hidden}
.photo-remplie .photo-modele{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}