/* ===========================================================================
   Maison Ferri, feuille unique. Refonte NOIR & OR du 10/10/2026.
   Palette arretee dans CHARTE_MAISON_FERRI_NOIR_OR.pdf, page 3.
   Aucune dependance externe. Polices WOFF2 servies par le site.

   CASCADE : cette feuille est ecrite UNE SEULE FOIS, de haut en bas, et les
   requetes de media sont toutes regroupees a la fin, de la plus large a la
   plus etroite. On n ajoute JAMAIS de bloc correctif a la suite : a
   specificite egale c est la derniere regle ecrite qui gagne, et un correctif
   appose en fin de fichier annule silencieusement le travail d au-dessus.
   =========================================================================== */

/* ------------------------------------------------------------------ polices
   Un seul fichier par famille : Google sert une fonte variable, les trois
   graisses de Manrope pointaient sur le meme binaire (mesure : 3 x 24 576 o
   identiques au sha256). On declare donc la plage de graisses. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;
  font-display:swap;src:url(/assets/polices/cormorant-garamond-latin.5d618c46.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;
  font-display:swap;src:url(/assets/polices/cormorant-garamond-latin-ext.9dc38267.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 600;
  font-display:swap;src:url(/assets/polices/manrope-latin.e310b55a.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 600;
  font-display:swap;src:url(/assets/polices/manrope-latin-ext.ce093b34.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ------------------------------------------------------------------- jetons
   Contrastes CALCULES (WCAG, formule de luminance relative) :
     ivoire  sur noir ............ 17,47:1      noir    sur or ......... 8,48:1
     gris    sur noir ............  9,84:1      noir    sur or clair .. 12,76:1
     or      sur noir ............  8,48:1      or prof sur ivoire .... 5,49:1
     or clair sur noir ........... 12,76:1      ivoire  sur charbon ... 15,77:1
     bordure de champ sur charbon   4,77:1 (seuil non-texte 3:1)
   INTERDITS, calcules eux aussi, jamais produits par cette feuille :
     gris chaud sur ivoire 1,78:1, or clair sur ivoire 1,37:1,
     ivoire sur or 2,06:1, blanc sur or 1,91:1. */
:root{
  --noir:#080808;
  --charbon:#171614;
  --or:#C7A45B;
  --or-clair:#E5CC91;
  --ivoire:#F4EFE4;
  --gris:#BCB5A8;
  --or-profond:#795B25;
  --filet:#4C4536;
  --bord-champ:#8E8268;

  --rayon:2px;
  --rayon-carte:3px;
  --largeur:1240px;
  --marge-laterale:64px;
  --t:180ms;                      /* transitions : 160 a 220 ms */
  --entete-h:116px;   /* 92 -> 116 le 14/10 : le logo passe de 80 a 104 px, on garde les 12 px de respiration au-dessus et au-dessous */
}

*,*::before,*::after{box-sizing:border-box}
/* un texte masque en position absolue se cale sur le premier ancetre
   POSITIONNE. Sans cela c est le bloc conteneur initial, et son
   rectangle peut sortir de la page. Mesure : 0 debordement sur 636
   couples page x largeur avant comme apres, c est une assurance. */
body{position:relative}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--noir);color:var(--ivoire);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:18px;line-height:1.65;font-weight:400;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
/* garde-fou : un svg sans regle de taille se deploie a 300 x 150 px */
svg{width:20px;height:20px;flex:none;stroke-width:1.7}

h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:600;line-height:1.06;margin:0 0 .5em;color:var(--ivoire);letter-spacing:0}
h1{font-size:clamp(2.5rem,5.4vw,4.5rem);font-weight:500}   /* 40 -> 72 px */
h2{font-size:clamp(2rem,3.6vw,3.125rem);font-weight:500}   /* 32 -> 50 px */
h3{font-size:1.5rem}
h4{font-size:1.2rem}
p{margin:0 0 1.1em;max-width:68ch}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.45em}
strong{font-weight:600;color:var(--ivoire)}
a{color:var(--or);text-underline-offset:3px}
a:hover{color:var(--or-clair)}

/* texte masque a l oeil, conserve pour les moteurs et les lecteurs d ecran.
   PAS de white-space:nowrap : une phrase sur une seule ligne etire son
   rectangle (mesure sur un autre chantier : 548 px de large) et fait
   deborder la page meme avec overflow:hidden. Le parent doit etre positionne,
   sinon le rectangle se cale sur le bloc conteneur initial. */
.hors-ecran{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;
  white-space:normal}
/* le lien d evitement doit DEVENIR visible quand il recoit le focus, sinon
   il reste une cible de 1 x 1 px que personne ne voit. */
.hors-ecran:focus{position:fixed;top:12px;left:12px;z-index:200;
  width:auto;height:auto;margin:0;padding:14px 20px;clip:auto;clip-path:none;
  background:var(--or);color:var(--noir);font-weight:600;border-radius:var(--rayon)}

.conteneur{width:100%;max-width:var(--largeur);margin:0 auto;
  padding-left:var(--marge-laterale);padding-right:var(--marge-laterale)}

/* --------------------------------------------------------------- sections */
.section{padding:104px 0;background:var(--noir)}
.section--creme{background:var(--charbon)}            /* alternance sombre */
.section--nuit{background:var(--noir);border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet)}

.surtitre{display:block;font-family:"Manrope",sans-serif;color:var(--or);
  font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.6875rem;line-height:1.4;margin-bottom:1.1rem}
.entete-section{max-width:62ch;margin:0 auto 56px;text-align:center}
.entete-section p{color:var(--gris);font-size:1.0625rem;margin:0 auto}

/* ---------------------------------------------------------------- boutons
   Rectangulaires, rayon 2 px, hauteur mini 52 px, padding 24 px.
   AUCUN bouton ne depend de la couleur de son parent : chaque variante
   porte SA couleur de fond ET sa couleur de texte, y compris au survol et
   au focus. C est la regle qui evite un bouton ardoise sur ardoise. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:14px 24px;border-radius:var(--rayon);
  font-family:"Manrope",sans-serif;font-weight:600;font-size:1rem;line-height:1.25;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color var(--t) ease,color var(--t) ease,border-color var(--t) ease}
.btn svg{width:18px;height:18px}

.btn--or,.btn--plein{background:var(--or);color:var(--noir);border-color:var(--or)}
.btn--or:hover,.btn--plein:hover,
.btn--or:focus-visible,.btn--plein:focus-visible{background:var(--or-clair);color:var(--noir);border-color:var(--or-clair)}

.btn--ligne{background:transparent;color:var(--or);border-color:var(--or)}
.btn--ligne:hover,.btn--ligne:focus-visible{background:var(--or);color:var(--noir);border-color:var(--or)}

.btn--ivoire{background:transparent;color:var(--ivoire);border-color:var(--bord-champ)}
.btn--ivoire:hover,.btn--ivoire:focus-visible{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)}

/* sur surface ivoire, le contour passe en or profond : l or antique sur
   ivoire ne mesure que 2,9:1, il ne peut pas porter de texte. */

/* -------------------------------------------------------------- en-tete
   POINT 1 d Arthur, 11/10/2026 : l en-tete porte LE LOGO livre.
   MESURE sur LOGO_MAISON_FERRI_NOIR_OR.png, 1254 x 1254 : la ligne
   « NETTOYAGE . RESTAURATION . RACHAT » occupe y 1012-1036, soit 25 px sur
   1254, 1,99 % de la hauteur. A 80 px de haut elle mesure 1,6 px : illisible,
   et il faudrait 301 px de logo pour lui donner 6 px de capitale. La taille
   fait ce qu elle peut, la MISE EN PAGE fait le reste : les trois mots sont
   reposes en texte HTML a cote du logo, lisibles et selectionnables.
   Le fond du PNG est un noir pur #000 et l en-tete est a #080808 : la charte
   autorise explicitement a reprendre le noir de la vignette pour que les
   bords se fondent, on pose donc #000 sous l image, sans toucher au dessin. */
:root{--logo-h:104px;--noir-logo:#000}   /* 80 -> 104 le 14/10, demande d Arthur : agrandir le logo sur ordinateur. Le noir est celui de la vignette du PNG livre. */
/* CARRE NOIR SOUS LE LOGO, defaut MESURE le 11/10/2026 au pixel sur la
   capture du rendu servi : l en-tete etait peint en rgb(8,8,8) et la vignette
   du logo, qui est un PNG OPAQUE, en rgb(0,0,0). Le logo dessinait donc un
   carre de 96 px visible sur toute la plage telephone, de x=294 a x=486 sur
   la capture a 390 px. C est tres probablement un des « carres bizarres »
   signales par Arthur le 11/10.
   La charte tranche ce cas precis : « Noir de la vignette du logo : reprendre
   celui de l image si necessaire pour que ses bords se fondent ; ne pas
   recolorer le dessin. » On reprend donc le noir de l image POUR L EN-TETE,
   on ne touche pas au fichier. Le reste du site garde #080808, et la bande
   des numeros, en charbon, separe toujours l en-tete du heros. */
.entete{position:sticky;top:0;z-index:60;background:var(--noir-logo);
  border-bottom:1px solid var(--filet)}
.entete .conteneur{display:flex;align-items:center;gap:26px;min-height:var(--entete-h)}
.logo{display:flex;align-items:center;gap:18px;text-decoration:none;
  flex:0 0 auto;min-height:48px}
.logo__img{height:var(--logo-h);width:var(--logo-h);object-fit:contain;
  flex:0 0 auto;display:block;background:#000;padding:3px;box-sizing:border-box}
/* `.logo__dit` est le FRERE du lien, plus son enfant : voir la note de
   gabarit.py. `margin-left:-8px` compense l ecart de 26 px de
   `.entete .conteneur` pour retrouver les 36 px de separation d avant. */
.logo__dit{display:flex;flex-direction:column;gap:7px;margin-left:-8px;
  padding-left:18px;border-left:1px solid var(--filet)}
.logo__base{font-family:"Manrope",sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or);line-height:1}
/* POINT 12 d Arthur, 11/10/2026 : « De pere en fils depuis 1952 » revient
   dans l en-tete, sous « Nettoyage . Restauration . Rachat », SUR TELEPHONE.
   Sur ordinateur l en-tete reste a deux lignes a cote du logo : la mention y
   est deja portee par le surtitre du heros, et une troisieme ligne y
   rallongerait une barre collante de 93 px sans rien apprendre.
   La regle qui la montre est dans `@media (max-width:760px)`, ecrite plus
   bas dans ce fichier : meme specificite, derniere ecrite, elle gagne. */
.logo__depuis{display:none}
/* le selecteur descendant ne marche plus, `.logo__dit` est devenu le frere
   immediat du lien : on passe au combinateur de voisinage. */
.logo:hover + .logo__dit .logo__base{color:var(--or-clair)}

.nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav a:not(.nav-tel){color:var(--ivoire);text-decoration:none;font-size:.9375rem;font-weight:500;
  white-space:nowrap;
  padding:6px 0;border-bottom:1px solid transparent;transition:color var(--t) ease,border-color var(--t) ease}
.nav a:not(.nav-tel):hover{color:var(--or)}
.nav a:not(.nav-tel)[aria-current="page"]{color:var(--or);border-bottom-color:var(--or)}
.nav-tel{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:12px 22px;border-radius:var(--rayon);
  background:var(--or);color:var(--noir);border:1px solid var(--or);
  font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap;
  transition:background-color var(--t) ease,border-color var(--t) ease}
.nav-tel:hover,.nav-tel:focus-visible{background:var(--or-clair);border-color:var(--or-clair);color:var(--noir)}
.burger{display:none;background:transparent;border:1px solid var(--bord-champ);
  border-radius:var(--rayon);padding:10px;cursor:pointer;color:var(--or);
  min-width:48px;min-height:48px;align-items:center;justify-content:center}
.burger svg{width:24px;height:24px}
.burger:hover{border-color:var(--or);color:var(--or-clair)}

/* ----------------------------------------------- bande des numeros (POINT 2)
   Elle defile. Elle doit rester utilisable :
   - `overflow:hidden` + `position:relative` sur le cadre : la piste depasse en
     largeur sans jamais allonger la page. Un `sr-only` ou un enfant large sans
     parent positionne suffit a etirer un document, on ne prend pas le risque ;
   - la piste contient DEUX lots identiques et se translate de -50 %, soit
     exactement la largeur d un lot : la boucle est sans raccord ;
   - l animation s arrete au survol ET au focus ;
   - sous prefers-reduced-motion il n y a pas d animation du tout : le second
     lot disparait et le premier passe a la ligne. */
.bnum{background:var(--charbon);border-bottom:1px solid var(--filet)}
/* DEMANDE D ARTHUR, 14/10/2026 : plus de defilement. Deux numeros fixes,
   celui de la page et le portable, centres. Tout ce qui servait a boucler
   l image est parti : la piste, l animation, la pause au survol, le second
   lot et le repli sous prefers-reduced-motion. Il n y a plus rien a arreter,
   donc plus rien a desactiver pour qui demande moins d animation. */
.bnum__lot{display:flex;justify-content:center;flex-wrap:wrap;
  list-style:none;margin:0 auto;padding:0;max-width:1180px}
.bnum__lien{display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:11px 26px;text-decoration:none;white-space:nowrap;
  color:var(--ivoire);font-size:.9375rem;font-weight:500;
  transition:color var(--t) ease,background-color var(--t) ease}
.bnum__lot li + li .bnum__lien{border-left:1px solid var(--filet)}
.bnum__lien svg{width:16px;height:16px;color:var(--or);flex:0 0 auto}
.bnum__ville{color:var(--gris);font-size:.8125rem;letter-spacing:.1em;
  text-transform:uppercase}
.bnum__tel{color:var(--or);font-weight:600;letter-spacing:.02em}
.bnum__lien:hover,.bnum__lien:focus-visible{background:#1F1D1A}
.bnum__lien:hover .bnum__tel,.bnum__lien:focus-visible .bnum__tel{color:var(--or-clair)}
/* Sous 420 px les deux numeros passent a la ligne plutot que de deborder, et
   le filet vertical devient horizontal : une bordure gauche sur un element
   qui vient de passer dessous ne separe plus rien. */
/* ⚠️ MESURE DU 14/10, rendu servi : cote a cote, les deux numeros demandent
   ~452 px a 320 px de large pour 280 px disponibles. Ils se replient donc, et
   la bande passait de 56 a 111 px, repoussant le H1 d autant. Ce depot a deja
   paye ce defaut le 11/10, en pire : la bande y etait montee a 443 px.
   On ne force pas une ligne qui ne tient pas ; on rend le repli le moins cher
   possible — cible de 48 px conservee pour le doigt, respiration reduite — et
   on repasse sur une ligne des que la largeur le permet. */
@media (max-width:430px){
  .bnum__lot{flex-direction:column}
  .bnum__lien{padding:6px 14px;min-height:44px;justify-content:center}
  .bnum__lot li + li .bnum__lien{border-left:0;border-top:1px solid var(--filet)}
}

/* ------------------------------------------------------------- hero maison
   Deux colonnes, 52 % texte / 48 % photographie. Le titre et les actions
   sont au premier ecran, avant toute galerie. */
.hero{background:var(--noir);border-bottom:1px solid var(--filet)}
.hero .conteneur{display:grid;grid-template-columns:52fr 48fr;gap:56px;
  align-items:center;padding-top:88px;padding-bottom:88px}
/* Charte page 3 : H1 de 64 a 72 px sur ordinateur, 40 a 46 px sur telephone.
   Le plafond etait a 56 px jusqu au 11/10, il a ete porte a 64 px. Mesure sur
   le rendu servi : 64 px a 1440 px de large, 40 px a 390 px. */
.hero h1{margin:0 0 .25em;font-size:clamp(2.5rem,4.6vw,4rem)}   /* charte : 40 px mobile -> 64 px ordinateur */
.hero__signature{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.75rem;
  line-height:1.15;color:var(--or);margin:0 0 1em;max-width:22ch}
.hero h1 .accent{color:var(--or);display:block}
.hero__texte p{color:var(--gris);font-size:1.125rem;max-width:46ch;margin-bottom:0}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__photo{margin:0;position:relative}
.hero__photo img{width:100%;height:clamp(320px,38vw,520px);object-fit:cover;
  border-radius:var(--rayon-carte);border:1px solid var(--filet)}
.hero__photo figcaption{margin-top:12px;font-size:.8125rem;color:var(--gris);line-height:1.5}

/* ancienne banniere pleine largeur, conservee pour les pages internes */
.heros{position:relative;background:var(--noir);padding:72px 0 64px;
  border-bottom:1px solid var(--filet)}
.heros::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.82) 55%,rgba(8,8,8,.62) 100%)}
.heros .conteneur{position:relative;z-index:1;max-width:1240px}
.heros h1{margin-bottom:.3em;max-width:18ch}
.heros p{color:var(--gris);font-size:1.0625rem;max-width:58ch;margin-bottom:0}
.heros .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ------------------------------------------------------- bande de reperes */
/* colonne de lecture unique, 60 a 70 caracteres */
.une-col{max-width:68ch;margin:0 auto}
.une-col h2{margin-bottom:.45em}

.reperes{background:var(--noir);border-bottom:1px solid var(--filet)}
.reperes .conteneur{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  padding-top:26px;padding-bottom:26px}
.repere{display:flex;align-items:center;gap:12px;font-size:.9375rem;color:var(--ivoire)}
.repere svg{color:var(--or)}

/* ------------------------------------------------------------- trois entrees */
.entrees{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--filet);border-radius:var(--rayon-carte);overflow:hidden}
.entree{display:flex;flex-direction:column;gap:14px;padding:40px 32px;
  text-decoration:none;background:var(--charbon);border-right:1px solid var(--filet);
  transition:background-color var(--t) ease}
.entree:last-child{border-right:0}
.entree:hover,.entree:focus-visible{background:#1F1D1A}
.entree svg{width:26px;height:26px;color:var(--or)}
.entree h3{margin:0;font-size:1.5rem;color:var(--ivoire)}
.entree p{margin:0;color:var(--gris);font-size:1.0625rem}
.entree__fleche{margin-top:auto;padding-top:14px;color:var(--or);font-size:.8125rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.entree:hover .entree__fleche{color:var(--or-clair)}

/* ----------------------------------------------------------------- cartes */
.grille{display:grid;gap:1px;background:var(--filet)}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--4{grid-template-columns:repeat(4,1fr)}
.carte{background:var(--charbon);padding:32px 28px;border-radius:0}
.carte h3{margin-bottom:.4em;font-size:1.375rem;color:var(--ivoire)}
.carte p{color:var(--gris);margin-bottom:0;font-size:1.0625rem}
.carte__icone{width:44px;height:44px;border:1px solid var(--filet);border-radius:var(--rayon);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.carte__icone svg{color:var(--or);width:21px;height:21px}
a.carte{text-decoration:none;display:block;transition:background-color var(--t) ease}
a.carte:hover,a.carte:focus-visible{background:#1F1D1A}
a.carte:hover h3{color:var(--or)}

/* ----------------------------------------------------------------- etapes */
.etape{position:relative;padding:0;background:var(--charbon);padding:32px 28px}
.etape__n{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--or);border-radius:50%;
  color:var(--or);font-family:"Cormorant Garamond",Georgia,serif;font-size:1.25rem;
  font-weight:600;margin-bottom:20px}
.etape h3{font-size:1.3125rem;margin-bottom:.4em}
.etape p{color:var(--gris);font-size:1.0625rem;margin-bottom:0}

/* ---------------------------------------------------------------- galerie */
.galerie{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
/* Deux colonnes quand la galerie est posee DANS une colonne de texte.
   Ecrite juste apres `.galerie` et a specificite egale, donc elle gagne ;
   les regles de media a 760 et 420 px sont plus bas dans le fichier et
   reprennent la main sur telephone, ce qui est l effet voulu. */
.galerie--2{grid-template-columns:repeat(2,1fr)}
.galerie figure{margin:0;background:var(--charbon);border:1px solid var(--filet);
  border-radius:var(--rayon-carte);overflow:hidden}
/* object-fit:cover sur les vues d atelier, les bords du tapis n y sont pas
   le sujet. Les pieces entieres passent en .galerie--piece, contain. */
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover}
.galerie--piece img{object-fit:contain;background:#0E0D0C}
.galerie figcaption{padding:14px 16px;font-size:.8125rem;color:var(--gris);line-height:1.5}

/* ----------------------------------------------------------- avant / apres */
.avap{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
.avap figure{margin:0;background:var(--charbon);border:1px solid var(--filet);
  border-radius:var(--rayon-carte);overflow:hidden}
.avap img{width:100%;height:auto}
.avap figcaption{padding:14px 16px;font-size:.8125rem;color:var(--gris);line-height:1.5}
.avap--paire{grid-template-columns:repeat(2,1fr);max-width:760px;margin:32px auto 0}

/* ------------------------------------------------------------------ villes */
.villes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;list-style:none;
  padding:0;margin:0;background:var(--filet);border:1px solid var(--filet)}
.villes li{margin:0}
.villes a{display:block;padding:14px 16px;background:var(--charbon);
  text-decoration:none;font-size:.9375rem;color:var(--ivoire);
  transition:background-color var(--t) ease,color var(--t) ease}
.villes a:hover,.villes a:focus-visible{background:var(--or);color:var(--noir)}

/* --------------------------------------------------------------- questions */
.question{background:var(--charbon);border:1px solid var(--filet);
  border-radius:var(--rayon-carte);margin-bottom:12px;padding:0 24px}
.question summary{cursor:pointer;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.3125rem;font-weight:600;padding:20px 0;color:var(--ivoire);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+";font-family:"Manrope",sans-serif;font-size:1.4rem;
  color:var(--or);line-height:1;flex:0 0 auto}
.question[open] summary::after{content:"\2212"}
.question summary:hover{color:var(--or)}
.question p{padding-bottom:20px;margin:0;color:var(--gris);font-size:1.0625rem}

/* -------------------------------------------------------------- formulaire
   Les champs sont sur charbon, bordes en #8E8268 : 4,77:1 contre le fond,
   au-dessus du seuil 3:1 des elements d interface. */
.devis{position:relative;background:var(--charbon);border:1px solid var(--filet);
  border-radius:var(--rayon-carte);padding:32px}
.devis h2{font-size:1.875rem;margin-bottom:.3em}
.devis__intro{color:var(--gris);font-size:1.0625rem;margin-bottom:1.6em}
.devis label{display:block;font-size:.875rem;font-weight:500;margin-bottom:7px;
  color:var(--ivoire)}
.devis input,.devis select,.devis textarea{width:100%;padding:14px 15px;margin-bottom:18px;
  min-height:52px;border:1px solid var(--bord-champ);border-radius:var(--rayon);
  font-family:inherit;font-size:16px;background:var(--noir);color:var(--ivoire);
  transition:border-color var(--t) ease}
/* #8B857A etait hors palette. Le gris chaud #BCB5A8 est le jeton de la
   charte pour le texte secondaire sur noir, et il monte le contraste. */
.devis input::placeholder,.devis textarea::placeholder{color:var(--gris)}
.devis input:hover,.devis select:hover,.devis textarea:hover{border-color:var(--or)}
.devis textarea{min-height:120px;resize:vertical}
.devis .btn{width:100%}
.devis__note{font-size:.8125rem;color:var(--gris);margin:14px 0 0;text-align:center}
/* PIEGE : `display:flex` ecrit ici l emporte sur la regle `[hidden]{display:none}`
   du navigateur, qui est une regle d AGENT UTILISATEUR. Les trois messages
   d erreur s affichaient donc EN PERMANENCE, 46 px chacun, alors qu ils
   portaient bien l attribut hidden. Mesure faite sur la valeur CALCULEE,
   pas sur l attribut : c est l attribut qui disait vrai et le rendu qui
   mentait. D ou la regle explicite ci-dessous. */
.devis__erreur{display:flex;align-items:flex-start;gap:7px;
  margin:-12px 0 16px;font-size:.875rem;color:var(--or-clair)}
.devis__erreur[hidden],.devis__bilan[hidden]{display:none}
.devis__erreur svg{width:16px;height:16px;margin-top:3px;color:var(--or-clair)}
.devis [aria-invalid="true"]{border-color:var(--or-clair);border-width:2px}
.devis__bilan{border:1px solid var(--or);border-radius:var(--rayon);padding:16px 18px;
  margin-bottom:22px;color:var(--ivoire);font-size:.9375rem;background:#1E1B16}
.devis form{position:relative}
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;white-space:normal}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* ---------------------------------------------------- selecteur d atelier */
.ateliers-contact{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--filet);border:1px solid var(--filet)}
.ac{display:flex;flex-direction:column;gap:6px;padding:22px 20px;background:var(--charbon);
  text-decoration:none;transition:background-color var(--t) ease}
.ac:hover,.ac:focus-visible{background:#1F1D1A}
.ac__ville{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.25rem;
  font-weight:600;color:var(--ivoire)}
.ac__num{color:var(--or);font-size:1rem;font-weight:600;white-space:nowrap}
.ac:hover .ac__num{color:var(--or-clair)}
.ac__zone{color:var(--gris);font-size:.8125rem}

/* -------------------------------------------------------------- pied */
.pied{background:var(--noir);border-top:1px solid var(--filet);
  padding:80px 0 28px;font-size:.9375rem;color:var(--gris)}
.pied .marque-bloc{display:flex;flex-direction:column;gap:20px;margin-bottom:56px;
  align-items:flex-start}
/* logo COMPLET, dans un espace suffisant. object-fit:contain, jamais cover. */
.pied .marque-bloc img{width:200px;height:200px;object-fit:contain;
  border:1px solid var(--filet);border-radius:var(--rayon-carte)}
.pied .marque-bloc p{color:var(--gris);font-size:.9375rem;max-width:44ch;margin:0}
.pied h2{font-family:"Manrope",sans-serif;color:var(--ivoire);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.14em;font-weight:600;margin-bottom:1.6em}
.pied a{color:var(--gris);text-decoration:none}
.pied a:hover{color:var(--or)}
.pied .grille{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;background:transparent}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:.6em}
.pied p{color:var(--gris)}
.pied__bas{border-top:1px solid var(--filet);margin-top:56px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:.8125rem;color:var(--gris)}
.pied__bas a{text-decoration:underline;color:var(--gris)}
.pied__bas a:hover{color:var(--or)}

/* --------------------------------------------------------- fil d ariane */
.fil{background:var(--charbon);border-bottom:1px solid var(--filet);
  font-size:.8125rem;padding:14px 0;color:var(--gris)}
.fil a{color:var(--gris);text-decoration:none}
.fil a:hover{color:var(--or)}
.fil span{color:var(--ivoire)}

/* ------------------------------------------------------- barre basse mobile
   Masquee par defaut, affichee sous 760 px. env(safe-area-inset-bottom) pour
   ne pas passer sous la barre du navigateur. */
.barre-basse{display:none}
.cale-barre{display:none}

/* ------------------------------------------------------------ liseres de focus
   Deux anneaux, un clair et un sombre : une seule teinte ne peut pas rester
   visible a la fois sur le noir du site et sur la surface ivoire. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
details:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--or-clair);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(8,8,8,.92);border-radius:1px}

/* ------------------------------------------------------------------ reveal
   8 px et opacite seulement, contenu visible sans JavaScript : l etat de
   repos est deja opaque, le script ne fait qu ajouter l animation. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(8px);
    transition:opacity 220ms ease,transform 220ms ease}
  .js .reveal.vu{opacity:1;transform:none}
}

/* ------------------------------------------- hero photo des pages internes
   POINT 8 : aucune page ne s ouvre sur du texte seul.
   POINT 4 : sur telephone la photo passe AVANT le titre. Le H1 reste PREMIER
   dans le document ; c est `grid-row` qui inverse l ordre visuel, pas
   `flex-direction`, qui s herite et se retourne contre les variantes. */
.heros--photo{padding:64px 0 60px}
.heros--photo .conteneur{display:grid;grid-template-columns:52fr 48fr;
  gap:48px;align-items:center}
.heros--photo .heros__texte{grid-column:1;grid-row:1}
.heros--photo .heros__photo{grid-column:2;grid-row:1;margin:0}
.heros--photo .heros__photo img{display:block;width:100%;
  height:clamp(240px,24vw,340px);object-fit:cover;
  border-radius:var(--rayon-carte);border:1px solid var(--filet)}
.heros--photo .heros__photo figcaption{margin-top:12px;font-size:.8125rem;
  color:var(--gris);line-height:1.5;max-width:46ch}
.heros--photo h1{max-width:20ch}

/* ------------------------------------- photo posee dans une colonne de texte */
.deux-col--photo{align-items:start}
.bloc-photo{margin:0;position:sticky;top:calc(var(--entete-h) + 24px)}
.bloc-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;border-radius:var(--rayon-carte);border:1px solid var(--filet)}
.bloc-photo figcaption{margin-top:12px;font-size:.8125rem;color:var(--gris);
  line-height:1.5}

/* --------------------------------------------- POINT 7 : de pere en fils 1952
   Arthur donne 1952 le 11/10/2026. C est la seule des quatre dates qui vienne
   du donneur d ordre : 1934 (page en production), 1945 (version archivee) et
   1987 (logo d une AUTRE maison) ne figurent nulle part sur le site. */
.hero__depuis{margin:0 0 1.5em}
.hero__depuis span{display:inline-block;font-family:"Manrope",sans-serif;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);padding:9px 16px;border:1px solid var(--filet);
  border-radius:var(--rayon)}
.marque-bloc__depuis{font-family:"Manrope",sans-serif;font-size:.75rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);margin:0 0 .9em}

/* ===========================================================================
   ADAPTATIONS, de la plus large a la plus etroite. Rien apres ce bloc.
   =========================================================================== */
@media (max-width:1100px){
  .conteneur{padding-left:32px;padding-right:32px}
  /* `.nav{gap:20px}` se trouvait ici. Il ne s appliquait JAMAIS : la requete
     a 1259 px est ecrite PLUS BAS et, a specificite egale, c est elle qui
     gagne sur toute la plage ou celle-ci agit aussi (<= 1100 px). Valeur
     CALCULEE au navigateur avant retrait : gap 0 px de 900 a 1259 px et
     28 px au-dela, soit exactement la meme qu apres retrait. Regle morte. */
  .pied .grille{grid-template-columns:repeat(2,1fr);gap:36px}
  .ateliers-contact{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1259px){
  /* le menu de bureau n a plus la place : on passe au menu deroulant AVANT
     que la signature ne doive ceder de la largeur.
     BASCULE CORRIGEE LE 11/10/2026, defaut MESURE present aussi sur la
     recette deja en ligne : a 1240 et 1241 px le menu de bureau venait de
     reprendre la main alors qu il lui faut 1246 px. Le bord droit de
     `.nav-tel` tombait a 1245,7 px pour une fenetre de 1240, soit 6 px de
     debordement horizontal sur les 53 pages, sur une plage de 2 px que les
     releves precedents, faits a 360/390/768/1024/1440, enjambaient. */
  .burger{display:inline-flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--charbon);border-bottom:1px solid var(--filet);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 32px 20px;
    margin-left:0}
  .nav.ouvert{display:flex}
  .nav a{padding:16px 0;border-bottom:1px solid var(--filet);font-size:1rem}
  .nav a[aria-current="page"]{border-bottom-color:var(--filet)}
  .nav-tel{justify-content:center;margin-top:16px}
  .entete .conteneur{justify-content:space-between}
  .hero .conteneur{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:56px}
  /* POINT 4 d Arthur, 11/10/2026 : sur telephone, la PHOTO D ABORD, le titre
     et le texte dessous. C est l inverse de ce que demandait la section 7 du
     brief ecrit ; c est le donneur d ordre qui tranche. Le H1 reste premier
     dans le document, seule la grille change : `grid-row` est explicite, la
     ou `order` et `flex-direction` s heritent et se retournent contre les
     variantes de carte. */
  .hero__photo{grid-row:1;grid-column:1}
  .hero__texte{grid-row:2;grid-column:1}
  .heros--photo .conteneur{grid-template-columns:1fr;gap:28px}
  .heros--photo .heros__photo{grid-row:1;grid-column:1}
  .heros--photo .heros__texte{grid-row:2;grid-column:1}
  .heros--photo h1{max-width:none}
  .bloc-photo{position:static}
  .grille--4{grid-template-columns:repeat(2,1fr)}
  .grille--3{grid-template-columns:repeat(2,1fr)}
  .villes{grid-template-columns:repeat(3,1fr)}
  .avap{grid-template-columns:repeat(2,1fr)}
  .deux-col{grid-template-columns:1fr;gap:40px}
  .entrees{grid-template-columns:1fr}
  .entree{border-right:0;border-bottom:1px solid var(--filet)}
  .entree:last-child{border-bottom:0}
  .reperes .conteneur{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:760px){
  /* POINT 11 d Arthur, 11/10/2026 : le logo x 1,5 sur telephone.
     Mesure du 11/10 sur le rendu servi : 64 px a 360/390/414 px et 68 px de
     420 a 760 px. x 1,5 donne 96 px, et 102 px sur la plage 420-760. On pose
     96 px sur TOUTE la plage telephone : au-dela de 96 px le medaillon
     commence a toucher le bouton de menu a 320 px de large. */
  :root{--entete-h:88px;--logo-h:96px;--marge-laterale:20px}
  /* DEMANDE D ARTHUR, 14/10/2026 : sur telephone, le logo devient le BLOC
     COMPLET livre le 14/10. Il est horizontal, donc il se dimensionne par sa
     LARGEUR et non par sa hauteur : c est la largeur qui contraint un ecran
     de 320 px, jamais la hauteur.
     ⚠️ LE CHIFFRE EST CONTRAINT PAR LE BOUTON DE MENU, pas par le gout. Le
     logo est CENTRE et le bouton sort du flux a droite. A 320 px : contenu
     280 px, centre a 160, bord gauche du bouton a 320 - 20 - 48 = 252. La
     demi-largeur doit donc rester sous 92 px, soit 184 px de large. 54vw
     donne 172,8 px a 320 px et laisse 5,6 px de jeu ; le plafond de 232 px
     prend le relais des 430 px de large. C est le defaut « le logo deborde
     sur les icones » paye sur six autres sites : il ne se repose pas ici.
     La baseline est DANS l image, donc le bloc de texte a cote disparait :
     le garder ecrirait deux fois « Nettoyage · Restauration · Rachat ». */
  /* AGRANDI le 14/10/2026 a la demande d Arthur. La largeur n est plus un
     pourcentage choisi mais la PLACE REELLEMENT DISPONIBLE, calculee :
       le logo est CENTRE, le bouton de menu est en absolu a droite ;
       bord gauche du bouton = 100vw - 20 (marge) - 48 (bouton) = 100vw - 68 ;
       centre du logo = 50vw, donc demi-largeur maximale = 50vw - 68 ;
       largeur maximale = 100vw - 136, dont on retire 14 px de garde.
     D ou `100vw - 150px`, qui laisse ~7 px entre le logo et le bouton a
     TOUTES les largeurs au lieu de 6 px a 320 et 22 px a 390 : c est la plage
     moyenne qui gagne, 211 -> 240 px a 390 et 232 -> 296 px au-dela de 446.
     ⚠️ A 320 px le gain est nul, et c est normal : on y etait deja au mur.
     Pour aller plus loin il faudrait descendre le logo sous le bouton, ce qui
     ajouterait ~48 px de hauteur d en-tete sur un telephone qui porte deja la
     bande des numeros. Non fait sans arbitrage. */
  /* La place disponible A GAUCHE : 100vw moins la marge de gauche (20), le
     bouton (48), la marge de droite (20) et 8 px de garde = 100vw - 96.
     Plafond a 340 px : au-dela le logo depasserait 86 px de haut et l en-tete
     grossirait plus que le gain de lisibilite. */
  .logo__img{width:min(100vw - 96px,340px);height:auto;padding:0}
  .logo__dit{display:none}
  body{font-size:16px}
  .conteneur{padding-left:20px;padding-right:20px}
  .section{padding:60px 0}
  .nav{padding:8px 20px 20px}
  /* POINT 5 d Arthur : LE LOGO CENTRE SUR TELEPHONE.
     Le bouton de menu sort du flux pour que le centrage porte sur le seul
     logo. Il est positionne par rapport a `.entete`, qui est deja sticky donc
     deja positionnee ; `.conteneur` reste non positionne, sinon le menu
     deroulant, en `left:0;right:0`, se recalerait sur la boite interieure et
     cesserait d occuper toute la largeur. */
  /* Le logo seul est centre, les deux lignes de texte passent dessous en
     bloc pleine largeur. Le lien ne porte plus que l image : sa boite fait
     96 x 96 px et ne peut plus recouvrir le bouton de menu, lequel reste
     sorti du flux pour que le centrage porte sur le seul medaillon. */
  /* ⚠️ CENTRAGE ABANDONNE le 14/10/2026, sur decision d Arthur : « met le a
     gauche si besoin, faut que le logo et menu soit meme ligne ». Le point 5
     du 08/10 demandait le logo CENTRE ; il bridait la largeur a 100vw - 136,
     parce qu un objet centre ne peut s approcher du bouton que de la moitie
     de ce qu il gagne. Aligne a gauche, la contrainte tombe : le logo part du
     bord et court jusqu au bouton, soit 100vw - 96. A 320 px cela fait 224 px
     au lieu de 170. Le bouton reste sorti du flux, a droite, MEME LIGNE. */
  .entete .conteneur{justify-content:flex-start;flex-direction:row;
    align-items:center;gap:0}
  /* POINT 1 d Arthur : la ligne « NETTOYAGE . RESTAURATION . RACHAT » du
     logo livre occupe la bande y 1012-1036 du PNG, soit 25 px sur 1254,
     1,99 % de sa hauteur. Au logo rendu a 96 px, dont 90 px d image utile
     apres les 3 px de marge de protection, cette ligne mesure
     90 x 25 / 1254 = 1,79 px : elle n est pas lisible, et aucune taille
     tenable dans une barre ne la rendrait lisible.
     On ne retouche pas le raster : les trois mots sont REPOSES en texte
     HTML sous le logo, centres, en Manrope 11 px. Le logo garde ses
     proportions et son contenu, l information devient lisible. */
  .logo{min-height:0;gap:0;flex-direction:column;text-align:center}
  /* pleine largeur et texte centre : la boite du bloc de texte occupe toute
     la largeur utile, donc elle croise le bouton de menu en X, mais sa bande
     verticale (sous le medaillon) ne croise jamais la sienne. Le controle de
     recouvrement exige X ET Y, il sort a zero. */
  .logo__dit{border-left:0;padding-left:0;margin-left:0;width:100%;
    align-items:center;gap:5px}
  /* POINT 12 d Arthur, 11/10/2026 : la ligne de filiation sous le logo.
     Elle est posee ici, DANS la requete telephone, apres le
     `.logo__depuis{display:none}` du haut de feuille : meme specificite,
     ecrite plus bas, elle gagne quand la requete s applique. La valeur
     CALCULEE a ete relue au navigateur, la regle n a pas ete crue sur
     parole (piege 3 du brief).
     Dimensionnement : 10 px, graisse 500, gris chaud, interlettrage 0,08em,
     `line-height:1`. L en-tete collant ne gagne donc que la hauteur de la
     ligne plus les 5 px d ecart, et la mention reste au-dessus du seuil de
     lisibilite, contrairement a la ligne GRAVEE DANS LE RASTER du logo qui
     mesure 1,79 px a 96 px de logo et qu aucune taille tenable ne sauve. */
  .logo__depuis{display:block;font-family:"Manrope",sans-serif;
    font-size:.625rem;font-weight:500;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gris);line-height:1;
    white-space:nowrap}
  .burger{position:absolute;right:var(--marge-laterale);top:50%;
    transform:translateY(-50%);height:48px}
  .hero .conteneur{padding-top:40px;padding-bottom:44px;gap:28px}
  .hero .actions{margin-top:28px}
  .hero__signature{font-size:1.375rem}
  .hero .actions .btn{flex:1 1 100%}
  .hero__photo img{height:240px}
  .heros{padding:40px 0 44px}
  .heros--photo{padding:0 0 44px}
  .heros--photo .conteneur{padding-top:0}
  .heros--photo .heros__photo img{height:230px}
  .heros--photo .heros__photo{margin-left:calc(-1 * var(--marge-laterale));
    margin-right:calc(-1 * var(--marge-laterale))}
  .heros--photo .heros__photo img{border-radius:0;border-left:0;border-right:0}
  .heros--photo .heros__photo figcaption{padding:0 var(--marge-laterale)}
  .entete-section{margin-bottom:36px}
  .grille--2,.grille--3,.grille--4{grid-template-columns:1fr}
  .pied .grille{grid-template-columns:1fr;gap:34px}
  .pied{padding:56px 0 24px}
  .pied .marque-bloc img{width:160px;height:160px}
  .galerie{grid-template-columns:repeat(2,1fr);gap:16px}
  .villes{grid-template-columns:repeat(2,1fr)}
  .avap{grid-template-columns:1fr}
  .avap--paire{grid-template-columns:repeat(2,1fr)}
  .ateliers-contact{grid-template-columns:1fr}
  .devis{padding:24px 20px}
  .deux-col{gap:32px}
  .reperes .conteneur{grid-template-columns:1fr;gap:12px}
  .pied__bas{flex-direction:column;gap:10px}
  /* la bande des numeros se replie sur telephone : deux lignes par lien,
     la ville au-dessus du numero, et une cible tactile pleine hauteur */
  .bnum__lien{padding:9px 18px;gap:7px}
  .bnum__ville{font-size:.6875rem}
  .bnum__tel{font-size:.9375rem}

  /* charte : corps a 16 px sur telephone. Ecrit ici, donc apres les
     regles a 17 px ci-dessus, pour gagner a specificite egale. */
  .entree p,.carte p,.etape p,.question p,.devis__intro,.heros p{font-size:1rem}

  /* barre basse : appel et estimation, toujours visibles */
  .barre-basse{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--noir);border-top:1px solid var(--filet);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
  .barre-basse .btn{width:100%;min-height:48px;font-size:.9375rem}
  /* espace sous le contenu : sans lui le pied passe sous la barre */
  .cale-barre{display:block;height:calc(78px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  .galerie{grid-template-columns:1fr}
  .avap--paire{grid-template-columns:1fr}
  /* `--logo-h:64px` se trouvait ici et ramenait le logo sous la taille
     demandee au POINT 11. Retire : la plage telephone tient desormais 96 px
     sur toute sa largeur, verifie sans recouvrement du bouton de menu a
     320 px. */
}
/* le clavier virtuel reduit la hauteur : on retire la barre basse en paysage
   tres bas, sinon elle recouvre le champ en cours de saisie. */
@media (max-width:760px) and (max-height:450px){
  .barre-basse{display:none}
  .cale-barre{display:none}
}

/* ------------------------------------------------------------------ tour 7
   HEROS DES PAGES INTERIEURES : LA PHOTO N EST PLUS ETIREE.
   Defaut MESURE sur la recette en ligne, sur 24 pages. Entre 761 et 1259 px
   la grille du heros passe sur UNE colonne et `.heros__photo img` prend
   `width:100%`. La photo, elle, est un fichier de 560 x 420. Resultat
   releve au navigateur, recadrage `cover` compris :
       768 px  -> boite  704 x 240  -> x1,26
      1024 px  -> boite  960 x 246  -> x1,71
      1200 px  -> boite 1072 x 288  -> x1,91
   A 1440 px la bascule deux colonnes ramene la boite a 511 x 340 et le
   defaut disparait : c est pour cela que les releves faits a 390 et 1440 px
   ne l avaient jamais vu.
   Les JPEG d origine ne sont plus sur le disque, on ne peut donc pas
   fabriquer de variante plus large. Mais il n y a pas besoin : il suffit de
   rendre la boite a la TAILLE REELLE du fichier, 560 x 420, et de la
   centrer. La photo est alors employee a x1,00, sans recadrage, et l aire
   d image du premier ecran ne s effondre pas :
       768 px  : 168 960 -> 235 200 px2  (+39,2 %)
      1024 px  : 236 160 -> 235 200 px2  ( -0,4 %)
      1200 px  : 308 736 -> 235 200 px2  (-23,8 %)
   La condition porte un `min-width:761px` EXPLICITE : le bloc telephone, qui
   veut la photo bord a bord sur 230 px de haut, est ecrit plus haut dans le
   fichier et a specificite egale c est le dernier qui gagne. En bornant la
   plage par le bas, les deux blocs ne se recouvrent plus du tout et la
   question de l ordre ne se pose plus. Valeur CALCULEE verifiee au
   navigateur apres coup, pas la regle qu on vient d ecrire. */
@media (min-width:761px) and (max-width:1259px){
  /* La borne ne vise QUE les photos au rapport 4/3, c est a dire les
     fichiers 560 x 420 des ateliers. La banniere des pages ville est au
     rapport 2,614 : la poser dans une boite 4/3 lui ferait consommer de la
     source par la hauteur et AGGRAVERAIT la sous-definition. Premiere
     version de ce correctif mesuree APRES envoi : la page ville tombait a
     x1,22 a 768 px, alors qu elle etait saine. Mesurer son propre correctif
     evite de livrer une regression. */
  .heros--photo .heros__photo:not(.heros__photo--banniere){max-width:560px;
    margin-left:auto;margin-right:auto}
  .heros--photo .heros__photo:not(.heros__photo--banniere) img{height:420px}
  /* MEME DEFAUT DANS LE CORPS, et il precede ce tour : `.bloc-photo` est la
     photo posee a cote d une colonne de texte. Sous 1260 px la paire passe
     sur une colonne et la photo prend toute la largeur : boite 1072 x 804 a
     1200 px pour un fichier de 560 x 420, soit x1,91. Mesure identique
     avant et apres mon correctif de heros, ce qui prouve qu il ne s agit pas
     d une regression mais d un defaut deja en ligne, que les releves faits a
     390 et 1440 px ne pouvaient pas voir. */
  .bloc-photo{max-width:560px;margin-left:auto;margin-right:auto}
}