/* CCM Menuiserie - feuille du site a rubriques.
 *
 * Reecrite le 29/08/2026. La version precedente etalait les pages : la maquette
 * L ENTREPRISE fait 1659 px de haut pour 948 de large, soit 2520 px une fois
 * ramenee a 1440 ; la page livree en faisait 4340. Les hauteurs de bande, les
 * couleurs de fond et les proportions ci-dessous sont RELEVEES sur les trois
 * maquettes (scripts/bands.mjs et scripts/sample-maquette.mjs), pas estimees.
 *
 * Les maquettes sont exportees a 948 px pour un dessin prevu en 1440 : tout se
 * convertit en multipliant par 1,52. C est ce facteur qui donne les 52 px de H1
 * de la charte a partir des 34 px mesures sur l image.
 *
 * L en-tete CSP du site declare style-src 'self' : aucun style inline ne passe,
 * tout vit ici.
 */

:root {
  color-scheme: light;

  /* Palette de la charte typographique du client. */
  --gold: #b77a42;          /* accents, surtitres */
  --gold-button: #af7e54;   /* boutons */
  --gold-light: #e6ae75;    /* seconde ligne des titres, sur fond sombre */
  --gold-band: #c3a582;     /* bande d appel finale - releve maquette ENTREPRISE */

  /* L or de la charte, #b77a42, ne rend que 3,36:1 sur la bande claire :
     assez pour un filet ou une surface, pas pour du TEXTE, qui en demande 4,5.
     Cette teinte-ci est la plus proche de la charte qui passe le seuil sur LES
     DEUX fonds clairs du site - mesuree a 5,54:1 sur le papier #f8f8f6 et
     4,68:1 sur le sable #ece4db. Un premier essai a #9c6231 passait sur le
     papier (4,7) et echouait sur le sable (3,97) : le sable est plus fonce, et
     c est lui qui commande. Elle ne sert QU AU TEXTE. */
  --gold-texte: #8f5729;
  --ink: #292522;           /* titres sur fond clair */
  --body: #3f3a36;          /* texte courant */
  --cream: #f5f1eb;         /* texte clair sur fond sombre */

  /* Fonds releves au pixel sur les maquettes. */
  --paper: #f8f8f6;         /* bande claire courante */
  --paper-warm: #f0efed;    /* bande de presentation, accueil */
  --gold-accueil: #a97c54;  /* bande d appel de l accueil, plus saturee */
  --sand: #ece4db;          /* bande du directeur, plus chaude */
  --dark: #141414;          /* bande sombre */
  --dark-soft: #1c1c1c;     /* bande sombre des engagements */
  --card-dark: #15110d;     /* fond des cartes de domaine et de realisation */
  --black: #000;            /* fond de banniere */
  --rule: #d9cdbd;

  /* Le degrade dore de la V2 (points 2, 3 et 5). Cinq arrets plutot que
     deux : un degrade a deux couleurs qui defile montre une couture nette
     a la boucle, celui-ci revient sur lui-meme. */
  --degrade-or: linear-gradient(90deg,
    var(--gold-light) 0%,
    var(--gold) 25%,
    var(--gold-button) 50%,
    var(--gold) 75%,
    var(--gold-light) 100%);
  --rule-dark: rgba(245, 241, 235, .18);

  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans: 'Montserrat', 'Segoe UI', Arial, sans-serif;

  /* Colonnes relevees sur la maquette d ACCUEIL : le contenu court sur
     962 px des 1672 px de l export, soit 1130 px a l echelle du dessin
     (~1920). Le bandeau de menu et la rangee de partenaires sont dessines
     plus larges : 1048 px, soit 1230. C est cet ecart de largeur - et non
     la typographie - qui donnait au site son air trop plein. */
  --shell: 1130px;
  --shell-large: 1230px;
  /* La gouttiere SUIT la fenetre au lieu de sauter. Elle valait 48 px, et
     26 px sous 900 : entre 900 et 901 px, elle doublait donc d un coup, et la
     coque TOMBAIT de 848 a 805 px - 43 px de moins pour un pixel d ecran en
     plus. Elle ne retrouvait ses 848 px qu a 944 px de fenetre. Sur ces 43 px
     de plage, un ecran plus large affichait une page plus etroite.

     « (100vw - 848px) / 2 » vaut exactement 26 px a 900 et exactement 48 px a
     944 : les deux bornes du dessin d origine sont conservees au pixel. Entre
     les deux, la gouttiere absorbe la largeur gagnee et la coque reste a
     848 px - elle ne recule plus jamais. */
  --gutter: clamp(26px, calc((100vw - 848px) / 2), 48px);
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  /* Pas de defilement adouci : il decale les captures de controle qualite. */
  /* L en-tete devient collant des le premier defilement (« [data-scrolled] »),
     sur 74 px. Sans cette reserve, un saut d ancre - le bouton « Nous
     contacter » comme le lien « Aller au contenu » - deposait sa cible SOUS
     la barre : mesure, 30 px de titre masques a 390 px, 82 px de contenu
     apres le lien d evitement. 92 px laissent l en-tete plus une respiration. */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--body);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* height:auto est indispensable : un attribut height= dans le HTML rend la
   propriete aspect-ratio inerte, et les vignettes repartent a leur hauteur
   nominale (900 px au lieu de 270). */
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
button, input, select, textarea, summary { font: inherit; }

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.12;
  text-transform: uppercase;
}

h1 { font-size: 52px; }
/* La charte fixe H2 a 32 px en desktop et 28 en mobile. La taille etait
   figee a 32 : « dans le respect du bati. » depassait alors de 7 px sa
   colonne a 390 px de fenetre. */
h2 { font-size: clamp(28px, 2.6vw, 32px); }
h3 { font-size: 22px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.shell {
  width: min(calc(100% - var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.shell--large { width: min(calc(100% - var(--gutter) * 2), var(--shell-large)); }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 18px;
  transform: translateY(-200%);
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  text-decoration: none;
}

.skip-link:focus { transform: none; }

/* L anneau etait en or clair : mesure, 1,89:1 sur le fond de l en-tete et
   1,18:1 sur la bande doree - invisible, alors que c est le seul repere de
   qui navigue au clavier. L encre sombre tranche sur les fonds clairs, et
   les bandes sombres reprennent l or clair juste apres. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* L encre sombre tranche sur les fonds clairs - 14,57:1 sur le papier, 6,53:1
   sur la bande doree - et DISPARAIT sur les fonds sombres : mesure, l anneau
   #292522 sur le pied #141414 rend 1,21:1, quand le seuil d un indicateur de
   mise au point est de 3:1. Les neuf liens du pied se traversaient donc a
   l aveugle au clavier. La creme y rend 16,4:1.
   ATTENTION - cet anneau ne se mesure QU EN ETAT FOCALISE : hors focus,
   « outlineColor » rend currentColor et non la valeur de cette regle. Une
   premiere mesure sans focus annoncait 16,37:1, qui etait la couleur du lien. */
.site-footer :focus-visible,
.section--dark :focus-visible,
.card-dark :focus-visible,
.hero :focus-visible { outline-color: var(--cream); }

/* La seconde ligne d un titre passe en or clair sur fond sombre, en or sur
   fond clair : c est la signature des trois maquettes. */
.tint { display: block; color: var(--gold); }
.section--dark .tint,
.section--black .tint,
.hero .tint { color: var(--gold-light); }

/* ---------------------------------------------------------------- En-tete -
   L en-tete flotte au-dessus de la banniere, sans fond. Sur la maquette le
   logo occupe 147 px de large pour 948, soit 223 px a 1440. */

/* Deux etats, tous deux dessines par le client :
   - par defaut le bandeau se pose EN SURIMPRESSION sur la banniere sombre,
     logo a l encre claire (maquettes ENTREPRISE et REALISATIONS) ;
   - sur l ACCUEIL c est une bande OPAQUE en texture de bois blanc, logo a
     l encre sombre, posee au-dessus de la banniere.
   Le decalage entre les deux n est pas une erreur de releve : les deux
   maquettes sont du client, a deux semaines d ecart. */
.site-header { position: absolute; z-index: 20; inset: 0 0 auto; }

.site-header__inner {
  display: flex;
  gap: 28px;
  align-items: center;
  width: min(calc(100% - var(--gutter) * 2), var(--shell-large));
  margin-inline: auto;
  padding-block: 22px;
}

.site-header--bandeau {
  /* ADHERENT DES LE DEPART, et non a partir d un seuil.
   *
   * Il etait « static » puis passait a « sticky » au-dela de 80 px. Entre les
   * deux, il defilait donc hors de l ecran comme le reste de la page - puis
   * ressurgissait d un bond en haut au franchissement du seuil. Mesure du
   * 02/09/2026 : le haut de l en-tete passe de -80 px a 0 px d une image a
   * l autre. C est ce SAUT DE 80 PX qu on voyait, et il ne pouvait pas etre
   * adouci : ce n est pas une transition, c est un changement de reference.
   *
   * Adherent d emblee, il ne quitte jamais l ecran, donc il n a jamais a y
   * revenir. Le franchissement du seuil ne change plus que son APPARENCE -
   * fond, ombre - ce qui, lui, se fond en douceur.
   */
  position: sticky;
  top: 0;
  /* « cover » et non « auto 100% » : ramenee a la hauteur de la barre (96 px),
   l image de 3600 x 196 ne couvrait plus que 1763 px et montrait sa couture
   de raccord sur tout ecran plus large. */
  /* V3, points 1 et 14 : « opacifier les stries du bois en arriere-plan du
     menu, l effet doit etre plus leger ». Le point 14 redemande la meme chose
     depuis la FAQ ; or la FAQ ne porte AUCUN autre bois - verifie, sa seule
     surface texturee est cette barre. Une correction couvre les deux points.

     « Plus leger » est une direction, pas une valeur. La dose se mesure :
     ecart-type de la luminance rendue, contenu de la barre masque. Elle valait
     10,49 ; la bande des TECHNIQUES - la seule texture que le client ait vue et
     validee, au point 27 de la V2 - en porte 4,76. C est elle qui donne le
     chiffre : le site n a plus qu une seule dose de texture.

     Le moyen est un VOILE de papier pose par-dessus le bois, dans la meme
     propriete. Un voile de couleur C a l opacite (1 - a) sur une photo P rend
     exactement ce que rendrait la photo a l opacite a sur un fond C : c est la
     meme somme. On evite ainsi un pseudo-element de plus, et la regle reste
     lisible d un seul tenant. */
  background-color: #fbfaf8;
  background-image:
    linear-gradient(rgba(251, 250, 248, .53), rgba(251, 250, 248, .53)),
    url('/assets/media/texture-menu-horizontal.webp');
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  border-bottom: 1px solid rgba(41, 37, 34, .07);
}

.site-header--bandeau .site-header__inner { padding-block: 26px; }
.site-header--bandeau .site-nav a { color: var(--ink); }
.site-header--bandeau .site-nav a:hover { color: var(--gold); }
.site-header--bandeau .site-nav a[aria-current='page'] { color: var(--gold); }
.site-header--bandeau .site-nav a[aria-current='page']::after {
  height: 2px;
  background: var(--degrade-or);
  background-size: 200% 100%;
  animation: ccm-degrade 5s linear infinite;
}
.site-header--bandeau .mobile-menu summary { color: var(--ink); border-color: var(--rule); }
/* Les deux logos sont desormais recadres sur leur dessin : la largeur CSS est
   donc la largeur du dessin, sans facteur cache. Relevee sur la maquette
   d ACCUEIL : le logo occupe 14,9 % de la rangee d en-tete, soit 183 px des
   1230 de la coque large. */
.site-header--bandeau .site-brand img { width: 183px; }

/* 162 px : la meme mesure sort des DEUX maquettes a en-tete flottant. Le
   dessin du logo occupe 118 px sur l export 1055 de CONTACT (facteur 1,365)
   et 108 px sur l export 948 d ENTREPRISE (facteur 1,52) - soit 161 et 164 px
   a l echelle du dessin. */
.site-brand { margin-right: auto; }
.site-brand img { width: 162px; height: auto; }

.site-nav { display: flex; gap: 26px; }

.site-nav a {
  position: relative;
  padding-block: 6px;
  color: var(--cream);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--gold-light); }

.site-nav a[aria-current='page']::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: '';
  /* Point 2 : « degrade anime ». Le degrade fait deux fois la largeur du
     tiret et glisse : c est le decalage du fond qui bouge, pas un element,
     donc rien ne se repeint hors de ces deux pixels. */
  background: var(--degrade-or);
  background-size: 200% 100%;
  animation: ccm-degrade 5s linear infinite;
}

.button {
  display: inline-block;
  padding: 15px 30px;
  border: 0;
  color: #fff;
  background: var(--gold-button);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

/* Point 3 : « degrade anime la couleur du bouton, a prendre en compte pour
   TOUS les boutons de la page ». La regle porte donc sur .button.
   Le remplissage au survol reste par-dessus, en .button::before. */
.button {
  background: var(--degrade-or);
  background-size: 200% 100%;
  animation: ccm-degrade 5s linear infinite;
}

/* PAS de raccourci « background » ici : il remettrait background-image a
   « none » et effacerait le degrade anime du point 3 au premier survol -
   mesure faite, le fond passait a « none » pendant que l animation
   continuait de tourner sur rien. Le remplissage au survol est assure par
   .button::before, qui glisse par la gauche. */
.button:hover { background-color: var(--gold); }

/* Le client ecrit « a prendre en compte pour TOUS les boutons de la page ».
   Le bouton sombre du bandeau final en est un. Il recoit donc le meme
   mouvement, mais dans SES tons : la maquette le montre sombre sur la bande
   doree, et un degrade dore l y aurait fait disparaitre. */
.button--dark {
  color: var(--cream);
  background: linear-gradient(90deg, #241c15 0%, #1e1813 25%, #2c241c 50%, #1e1813 75%, #241c15 100%);
  background-size: 200% 100%;
  animation: ccm-degrade 5s linear infinite;
}

/* Le bouton fantome, lui, est transparent par dessein : rien a animer. */
.button--ghost { animation: none; }
.button--dark:hover { background: #2c241c; }

.button--ghost {
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--rule-dark);
}

.button--ghost:hover { border-color: var(--gold-light); background: transparent; }

.site-header .button { padding: 14px 26px; }

/* Menu de repli : la barre horizontale ne tient plus sous 1080 px. */
.mobile-menu { display: none; position: relative; }

/* LE BOUTON : 48 px de cote, et rien d autre dedans que l icone.
   Quarante-huit pixels est la plus petite cible qu un pouce atteint sans
   viser ; le bouton faisait 12 px de haut de texte plus son rembourrage. */
.mobile-menu summary {
  position: relative;
  z-index: 31;              /* au-dessus du panneau : la croix reste cliquable */
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule-dark);
  color: var(--cream);
  list-style: none;
  cursor: pointer;
}

.mobile-menu summary::-webkit-details-marker { display: none; }

/* LES TROIS BARRES, et la croix qu elles deviennent. Le meme trait sert aux
   deux etats : c est le pivot qui dit « c est ouvert, et voila comment on
   ferme ». Un menu qu on ouvre sans voir comment le fermer est un piege. */
.burger {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: background-color .18s ease;
}

.burger::before,
.burger::after {
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  content: '';
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.burger::before { top: -7px; }
.burger::after  { top: 7px; }

.mobile-menu[open] .burger { background: transparent; }
.mobile-menu[open] .burger::before { transform: translateY(7px) rotate(45deg); }
.mobile-menu[open] .burger::after  { transform: translateY(-7px) rotate(-45deg); }

/* LE PANNEAU PREND TOUT L ECRAN.
   Il s ouvrait en petite boite flottante, ancree a droite sous le bouton : elle
   recouvrait le titre a moitie, laissait voir la page derriere, et rien ne
   disait ou elle commencait ni ou elle finissait. Plein ecran, il n y a plus
   d ambiguite - on est dans le menu, on en sort par la croix. */
.mobile-menu__panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 96px 24px 40px;
  /* OPAQUE. A 97,5 %, le titre de la page restait lisible derriere les
     libelles : deux textes superposes, dont aucun ne se lit vraiment. */
  background: #121110;
  animation: ccm-menu-ouvre .26s ease both;
}

/* LA BULLE DE DISCUSSION PASSE DEVANT TOUT - plan 2 147 483 645. Elle se
   posait sur le menu ouvert comme elle se posait sur l ecran d entree et sur le
   panneau de l editeur. Troisieme fois, meme remede : on la masque le temps du
   menu, plutot que de surencherir sur son plan. */
html:has(.mobile-menu[open]) [id^='chatbase'] { display: none !important; }

@keyframes ccm-menu-ouvre {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.mobile-menu__panel a {
  width: 100%;
  max-width: 320px;
  padding: 17px 0;          /* la ligne entiere est la cible, pas le mot */
  border-bottom: 1px solid rgba(245, 241, 235, .10);
  color: var(--cream);
  font-size: 15px;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-menu__panel a:last-child {
  margin-top: 18px;
  border: 0;
  background: var(--gold-button);
  color: #fff;
  font-weight: 600;
}

.mobile-menu__panel a[aria-current='page'] { color: var(--gold-light); }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__panel { animation: none; }
  .burger,
  .burger::before,
  .burger::after { transition: none; }
}

/* --------------------------------------------------------------- Banniere -
   Fond noir, photo calee a droite sur 62 % de la largeur, degrade horizontal
   qui la noie vers la gauche. C est ce dispositif - et non une photo pleine
   largeur - qui donne aux maquettes leur lisibilite. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Banniere de la maquette : 481 px sur 1672, soit 566 a l echelle du
     dessin. Le plancher tient les quatre lignes du titre a 52 px. */
  min-height: clamp(520px, 39.3vw, 600px);
  overflow: hidden;
  color: var(--cream);
  background: var(--black);
}

/* L en-tete de ces pages FLOTTE au-dessus de la banniere : il ne prend aucune
   place dans le flux. Sans cette reserve, le contenu centre de la banniere
   remontait DERRIERE lui - le surtitre « CONTACT » commencait a 121 px pour un
   en-tete haut de 139, et se lisait colle sous la signature du logo. Sur la
   maquette, il commence a 198 px. L accueil n est pas concerne : son bandeau
   est opaque et occupe sa place dans le flux. */
.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 76%;
}

/* Point 5 : « il manque les contours haut et bas uniquement, avec un
   liseré degradé ». border-image peint les quatre cotes, mais seuls ceux
   qui ont une largeur se voient - d ou « border-width: 3px 0 ». */
.hero--slider {
  border-style: solid;
  border-width: 3px 0;
  border-image: var(--degrade-or) 1;
}

/* Sur l accueil la photo court sur TOUTE la largeur : c est le degrade qui
   assombrit la gauche. A 76 % le bord de la photo se lisait comme une
   couture verticale au milieu de la bande. */
.hero--slider .hero__media { width: 100%; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Le cadrage de la banniere d accueil est celui de la maquette : l artisan a
   droite du tiers, ses mains sur la piece visibles en bas de bande. */
.hero--slider .hero__media img {
  object-position: 56% 54%;
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .99) 0%,
    rgba(0, 0, 0, .98) 26%,
    rgba(0, 0, 0, .88) 38%,
    rgba(0, 0, 0, .45) 55%,
    rgba(0, 0, 0, .08) 74%,
    rgba(0, 0, 0, .02) 100%);
  pointer-events: none;
}

/* Le bandeau de menu est OPAQUE sur les cinq pages depuis le 30/08 : il occupe
   sa place dans le flux au lieu de flotter au-dessus de la banniere. La
   banniere n a donc plus rien a lui reserver - les 198 px de retrait qui la
   protegeaient laisseraient un vide de la hauteur d un en-tete. */
.hero .shell { position: relative; z-index: 2; padding-block: 44px; }

/* Le titre est mesure contre SA COLONNE, pas contre la fenetre : une taille en
   vw debordait a 641 px et au-dela de 1440. cqi lit la colonne. */
/* 600 px : les titres longs des pages interieures - « La maitrise du geste,
   l exigence du resultat » - tenaient sur quatre lignes dans 560. */
.hero__copy {
  width: min(600px, 100%);
  container-type: inline-size;
}

.hero h1,
.hero .hero-title {
  margin: 0;
  color: var(--cream);
  font-family: var(--serif);
  /* 52 px en desktop, 38 en mobile : la charte typographique du client.
     La maquette d accueil, elle, dessine ~45 px - ecart assume, tranche
     par le client en faveur de la charte. */
  font-size: clamp(38px, 9.4cqi, 52px);
  font-weight: 400;
  line-height: 1.08;
  text-transform: uppercase;
}

.hero__rule {
  width: 58px;
  height: 2px;
  margin: 26px 0 24px;
  background: var(--gold);
}

.hero__lede {
  max-width: 440px;
  margin: 0 0 30px;
  color: var(--cream);
  font-size: 16px;
  line-height: 1.75;
}

/* ---------------------------------------------------------------- Sections */

.section { padding-block: 54px; }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--white { background: #fff; }
/* Un blanc casse plus chaud que --paper : releve a #F0EFED sur la bande de
   presentation de l accueil, qui n est pas la meme que les autres. */
.section--presentation { background: var(--paper-warm); }

/* Retraits verticaux releves bande par bande sur la maquette d accueil.
   Les trois bandes claires n ont PAS le meme rythme : celle des
   partenaires laisse 94 px de blanc sous les logos, presque le double des
   autres, et c est ce blanc qui donne a la rangee son calme. */
.section--domaines { padding-block: 46px 54px; }
.section--domaines .section-title { margin-bottom: 30px; }
.section--etapes { padding-block: 54px 84px; }
.section--engagements { padding-block: 54px 72px; }
.section--partenaires { padding-block: 74px 94px; }
.section--partenaires .section-title { margin-bottom: 60px; }

/* Texte 360 px, film 532 px, gouttiere 68 : releve sur la maquette. */
.section--presentation .split { grid-template-columns: .677fr 1fr; gap: 68px; }

/* Photo a fond perdu a GAUCHE, texte a droite : la specialite de l accueil.
   La photo ne s arrete pas net, elle se fond dans le noir de la bande. */
/* Point 12 : « laisser plus de marge avant et apres le texte, en
   agrandissant un peu le bandeau, pour que ca respire plus ». La hauteur
   minimale passe de 442 a 512 px et la marge interne de 22 a 64. */
.section--specialite {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 512px;
  padding-block: 64px;
  overflow: hidden;
}

.section--specialite .section__bleed { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 62%; }
.section--specialite .section__bleed img { width: 100%; height: 100%; object-fit: cover; }

.section--specialite::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  background: linear-gradient(90deg,
    rgba(20, 20, 20, 0) 0%,
    rgba(20, 20, 20, 0) 34%,
    rgba(20, 20, 20, .55) 46%,
    rgba(20, 20, 20, .96) 55%,
    var(--dark) 60%);
  pointer-events: none;
}

.section--specialite .shell { position: relative; z-index: 2; }
.split__copy--droite { width: min(430px, 100%); margin-left: auto; }

.section--dark {
  color: var(--cream);
  background: var(--dark);
}

.section--black { color: var(--cream); background: var(--black); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--black h1, .section--black h2, .section--black h3 { color: var(--cream); }

/* Surtitre : 13 px, 600, or, capitales, interlettrage 1,5 px, suivi d un filet
   court. Charte typographique, bloc H4. */
.eyebrow {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow::after {
  flex: 0 0 42px;
  height: 1px;
  content: '';
  background: currentcolor;
  opacity: .55;
}

/* Titre de section centre entre deux filets - « NOS VALEURS », « UNE SELECTION
   DE REALISATIONS ». Le filet est la moitie de la moitie restante. */
.section-title {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
  margin: 0 0 40px;
  text-align: center;
}

.section-title::before,
.section-title::after {
  /* Base 120 px et non auto : un titre sur deux lignes ecrasait ses filets. */
  flex: 1 1 120px;
  max-width: 190px;
  height: 1px;
  content: '';
  background: var(--rule);
}

.section--dark .section-title::before,
.section--dark .section-title::after { background: var(--rule-dark); }

/* Sous 560 px, ces deux filets rendaient 7 px de large - mesure sur « Nos
   engagements » a 320 px - tout en consommant 66 a 116 px des 268 px de coque
   avec leurs gouttieres. Le titre s y hachait sur cinq lignes. Deux poussieres
   de part et d autre ne valent pas quatre lignes de plus : on les retire, et
   le titre reprend toute la largeur. */
@media (max-width: 560px) {
  .section-title::before,
  .section-title::after { display: none; }
}

.section__head { margin-bottom: 36px; }
.section__head p { max-width: 620px; }

.rule {
  width: 58px;
  height: 2px;
  margin: 22px 0;
  background: var(--gold);
}

.section--dark .rule, .section--black .rule { background: var(--gold-light); }

/* Deux colonnes texte / image. La maquette les serre : 64 px de gouttiere, et
   l image occupe 48 % de la coque. */
.split {
  display: grid;
  gap: 56px;
  grid-template-columns: 0.76fr 1fr;
  align-items: center;
}

.split--media-left > :first-child { order: -1; }
.split__copy { max-width: 520px; }
.split__copy p { color: inherit; }

.section--dark .split__copy p, .section--black .split__copy p { color: rgba(245, 241, 235, .82); }

figure { margin: 0; }

/* --------------------------------------------------- Directeur (ENTREPRISE) -
   Trois colonnes : portrait, texte, detail. La colonne de detail manquait dans
   la version precedente ; c est elle qui equilibre la bande. */

/* Sur la maquette, la colonne centrale occupe 570 px des 1290 de la bande : les
   deux colonnes d image sont plus etroites qu on ne les avait posees. C est
   cette largeur qui manquait aux trois notes une fois le texte revenu aux 16 px
   de la charte - la troisieme passait sous la photo de droite. */
.director {
  display: grid;
  gap: 46px;
  column-gap: 34px;
  grid-template-columns: 300px 1fr 240px;
  align-items: stretch;
}

.director__portrait img,
.director__detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.director h2 { margin-bottom: 4px; }

.director__role {
  margin: 0 0 18px;
  color: #6f645a;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.director__copy p { font-size: 15px; }

/* Trois notes a picto, sous le texte du directeur. */
.notes {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.notes li { display: flex; gap: 12px; align-items: flex-start; }
.notes p { margin: 0; line-height: 1.55; }

/* ------------------------------------------------------------- Pictogrammes -
   Icones au trait, doree, 1 px. Elles sont partout dans les maquettes et leur
   absence est ce qui trahissait le plus l ecart. */

.ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section--dark .ico, .section--black .ico { stroke: var(--gold-light); }
.ico--lg { width: 38px; height: 38px; }

/* ------------------------------------------------------------- Nos valeurs -
   Cinq colonnes separees par un filet vertical, picto au-dessus. */

.values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.values li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 4px 22px;
  text-align: center;
}

.values li + li { border-left: 1px solid var(--rule); }

.values h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

/* Point 14 : « mettre les titres dans la meme typo que ceux de maitrise
   totale - goromont, gras ». « Goromont » est Cormorant Garamond : c est la
   seule police a empattements de la charte du client, et il ecrit ce mot
   cinq fois. Meme regle pour les valeurs de l ENTREPRISE (point 22) et les
   deux bandes du SAVOIR-FAIRE (points 24 et 29). */
/* « gras » n est demande que par le PDF de l ACCUEIL (point 14 :
   « goromont, gras »). Celui de l ENTREPRISE dit seulement « la bonne typo
   (goromont » - sans graisse. Les valeurs gardent donc la graisse normale,
   et c est traite plus bas. */
.section--engagements .values h3,
.section--valeurs .values h3,
.section--materiaux .values h3,
.section--techniques .values h3 {
  font-family: var(--serif);
  font-size: 19px;
  /* 600 : voir la note sur .steps h3. Cormorant n est pas livre en 700. */
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.values p { line-height: 1.6; }

/* --------------------------------------------------------- Tuiles encadrees -
   Bande sombre des engagements : quatre cases a filet fin, picto puis libelle
   sur deux lignes, centrees. */

.boxes {
  display: grid;
  gap: 16px;
  /* « 1fr » vaut « minmax(auto, 1fr) » : une piste ne descend jamais sous le
     min-content de son contenu. Le mot « ACCOMPAGNEMENT » elargissait donc la
     PREMIERE case de 27,6 % par rapport a ses trois voisines, et les quatre
     pictogrammes se posaient a 37, 19, 37 et 28 px du haut - 18 px d ecart.
     « minmax(0, 1fr) » rend les quatre pistes vraiment egales. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.boxes li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  /* « center » alignait les CONTENUS, donc chaque case posait son pictogramme a
     une hauteur dictee par la longueur de son libelle : trois cases a trois
     lignes, une a deux, et le troisieme medaillon descendait de 9 px. Mesure
     d un controleur independant : 19 / 19 / 28 / 19 px du haut de la case.
     « flex-start » les aligne tous les quatre sur le meme trait, et la
     difference de longueur se reporte en bas, ou personne ne la lit. */
  justify-content: flex-start;
  min-height: 118px;
  padding: 18px 12px;
  border: 1px solid rgba(230, 174, 117, .34);
  text-align: center;
}

.boxes span {
  color: var(--cream);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  line-height: 1.5;
  text-transform: uppercase;
  /* V3, point 8 : « le mot ACCOMPAGNEMENT sort du cadre ».
     Ce n est pas un debordement de 1 px qu on rattraperait a la marge : mesure,
     le mot fait 142 px pour une boite utile de 117. C est un mot INSECABLE plus
     large que sa colonne, et c est la contrepartie directe du correctif du
     01/09 - « minmax(0, 1fr) » a rendu les quatre pistes egales, donc la
     premiere ne s elargit plus pour loger son mot le plus long.
     Rogner la graisse ou l interlettrage des QUATRE libelles pour un seul mot
     serait payer le mauvais prix. On autorise la cesure : la page est en
     « lang=fr », le navigateur coupe donc au bon endroit. « break-word » ne
     sert que de filet, si un mot n avait aucun point de cesure. */
  hyphens: auto;
  overflow-wrap: break-word;
  /* Sans cette borne, la cesure ne se declenche jamais : l etiquette est un
     ELEMENT FLEX dans une colonne « align-items: center », donc sa largeur
     reste celle de son contenu - 142 px - et rien ne la contraint a se couper.
     Mesure apres le seul « hyphens: auto » : toujours 142 px pour 141. */
  max-width: 100%;
}

/* ------------------------------------------------- Cartes domaine (REAL) -
   Photo en haut, bloc sombre en bas avec titre serif or, texte et fleche. */

.cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cards li { display: flex; flex-direction: column; background: var(--card-dark); }

.cards img {
  width: 100%;
  aspect-ratio: 305 / 150;
  object-fit: cover;
}

.cards__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px 18px;
}

.cards h3 {
  margin-bottom: 10px;
  color: var(--gold-light);
  font-size: 19px;
  line-height: 1.18;
}

.cards p {
  margin: 0 0 16px;
  color: rgba(245, 241, 235, .78);
  line-height: 1.55;
}

.cards__arrow {
  margin-top: auto;
  color: var(--gold-light);
  font-size: 17px;
  text-decoration: none;
}

/* Les quatre cartes de domaine servent AUSSI de menu de filtre : le brief
   texte demande une galerie filtrable, la maquette dessine quatre cartes. Les
   deux tiennent si la carte est le bouton. */
.cards button {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  color: inherit;
  background: var(--card-dark);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cards button[aria-pressed='true'] { outline: 1px solid var(--gold-light); outline-offset: -1px; }
.cards button[aria-pressed='true'] .cards__arrow { transform: translateX(6px); }
.cards__arrow { transition: transform .25s ease; }

/* ------------------------------------------------------- Galerie defilante -
   Bande de photos legendees qui glisse lentement.

   Fondu SUR LES DEUX BORDS. La regle avait ete declaree TROIS fois dans cette
   feuille, avec deux intentions contraires - dont une qui ne gardait que le
   bord droit, au motif que le fondu de gauche rognait la legende de la premiere
   vignette. Ce motif est faux : la piste defile en continu (boucle
   requestAnimationFrame dans ccm-site.js), la premiere vignette n est flush a
   gauche qu a l instant zero, et une legende coupee sur une capture est une
   vignette EN TRAIN DE SORTIR, pas un defaut de masque. Sans fondu a gauche,
   elle se couperait net. */

/* La piste va d un bord a l autre : sur la maquette, la premiere vignette est
   coupee par le bord gauche et la derniere par le bord droit - 795 et 719 px
   pour une vignette complete de 910. C est ce debordement qui lui donne son
   ampleur, et c est ce qui manquait quand elle etait rangee dans la coque.
   Elle n est donc plus dans « .shell » : elle est enfant direct de la bande. */
.gallery__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent 100%);
}

/* Les deux replis sans mouvement rendent une GRILLE, pas un ruban : plus de
   masque pour adoucir les bords, donc il faut une marge, sans quoi les
   vignettes viendraient buter contre le bord de la fenetre. */
.gallery__viewport:has(.gallery__track[data-static]),
html:not(.js-anim) .gallery__viewport { padding-inline: var(--gutter); }

/* En repli sans mouvement la piste devient une grille, plus haute que large :
   le masque lateral et le rognage n ont plus de sens et couperaient des rangs. */
.gallery__viewport:has(.gallery__track[data-static]) {
  overflow: visible;
  mask-image: none;
}

/* 17 px, releve sur la maquette : les deux separations completes y mesurent
   34 px pour un facteur d echelle de 2,00. C etait 28. */
.gallery__track { display: flex; gap: 17px; margin: 0; padding: 0; list-style: none; }

/* Repli sans mouvement : le JS pose cet attribut quand le visiteur a demande de
   reduire les animations. La piste cesse d etre un ruban qui defile et devient
   une grille : rien ne bouge, et surtout rien ne reste hors d atteinte. */
.gallery__track[data-static] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  transform: none !important;
}

.gallery__track[data-static] .gallery__item { flex: initial; }

/* V3, point 11 : « le bandeau photo est trop petit - mettre les photos en plus
   grande ». Trois bandes de cette page portent des photos ; une seule en porte
   PLUSIEURS, et c est celle-ci - le pluriel de la consigne la designe. Le mot
   « bandeau » est d ailleurs le sien : ses briefs numerotent les bandes de la
   page, « Bandeau 3 - Galerie filtrable ».

   La taille n est pas choisie, elle est RELEVEE sur sa maquette V2 (3456 px,
   facteur deduit 2,00) : les deux vignettes completes y mesurent 918 et 903 px,
   soit 459 et 452 a l echelle du dessin, et la bande d images 618 px de haut,
   soit 309. D ou 455 x 309, et un rapport de 1,472 la ou nous etions a 1,949 :
   les photos etaient non seulement plus petites, mais deux fois plus rognees.

   « min(455px, 100%) » et non une largeur fixe : sous 455 px de fenetre, la
   vignette serait plus large que le carrousel et il n en montrerait jamais une
   entiere. Le debordement de PAGE resterait nul - le carrousel rogne - donc
   rien ne le signalerait. Le pourcentage d une base flexible se rapporte au
   conteneur, pas a l ecran : viser « 100vw » laissait 12 px de trop.

   Ce que la version precedente avait appris, et qui vaut toujours : une largeur
   FIXE laissait la vignette deborder de la fenetre du carrousel - 64 px a 320,
   24 px a 360 - sans que le debordement de PAGE bouge d un pixel, puisque le
   carrousel rogne. Rien ne le signalait ; il fallait mesurer la vignette
   elle-meme. Et un essai en « calc(100vw - 40px) » visait l ECRAN au lieu du
   conteneur : la part visible plafonnait a 96 %.

   Deux commentaires decrivaient cette meme regle, l un perime : ils sont
   fondus ici. L ancienne valeur n est volontairement pas recopiee telle
   quelle - un controle de deploiement verifie sa disparition en lisant le
   fichier ENTIER, commentaires compris, et une prose qui cite l ancien
   reglage suffit a le faire echouer. C est arrive deux fois. */
.gallery__item { flex: 0 0 min(455px, 100%); margin: 0; }

.gallery__item img {
  width: 100%;
  aspect-ratio: 455 / 309;
  object-fit: cover;
}

.gallery__item figcaption { padding-top: 12px; }

.gallery__item strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.gallery__item span { display: block; margin-top: 2px; color: var(--gold); font-size: 13px; }

/* ----------------------------------------------------- Selection de projets -
   Trois colonnes, deux rangs. Legende : intitule sombre puis ville en or. */

.projects {
  display: grid;
  gap: 30px 28px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.projects img {
  width: 100%;
  aspect-ratio: 384 / 197;
  object-fit: cover;
}

.projects figcaption { padding-top: 12px; }

.projects strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.projects span {
  display: block;
  margin-top: 2px;
  color: var(--gold);
  font-size: 13px;
}

/* ----------------------------------------------------- Notes en ligne (or) -
   « INTERVENTION / APPROCHE / EXIGENCE » sur la bande sombre de REAL, et les
   trois garanties du bas de CONTACT. */

/* auto-fit et non repeat(3) : sous 150 px par note, trois colonnes ne peuvent
   plus contenir un mot francais entier et le texte sort de sa boite. Mieux vaut
   deux rangs lisibles qu un rang qui deborde. */
.inline-notes {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  margin: 26px 0 28px;
  padding: 0;
  list-style: none;
}

.inline-notes li { display: flex; gap: 12px; align-items: flex-start; }
.inline-notes strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.inline-notes p { margin: 0; color: rgba(245, 241, 235, .78); line-height: 1.5; }

.inline-notes--center li { flex-direction: column; align-items: center; text-align: center; }
.inline-notes--center strong { margin-top: 10px; }

/* Bande sombre dont la photo deborde a droite : la maquette la fait mourir
   dans le fond au lieu de l encadrer. */
.section--media-right { position: relative; isolation: isolate; overflow: hidden; }

.section--media-right .section__bg {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 auto;
  width: 44%;
}

.section--media-right .section__bg img { width: 100%; height: 100%; object-fit: cover; }

.section--media-right::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background: linear-gradient(90deg,
    var(--dark) 0%, var(--dark) 52%, rgba(20, 20, 20, .92) 68%, rgba(20, 20, 20, .55) 100%);
}

/* ------------------------------------------------------ Bande d appel doree -
   Fond #C3A582 releve sur la maquette, bouton SOMBRE. L inversion est voulue :
   c est le seul bouton sombre du site. */

.gold-cta {
  padding-block: 30px;
  background: var(--gold-band);
}

.gold-cta__grid {
  display: flex;
  /* Releve sur la maquette ENTREPRISE, bande 1591-1659 : le texte tient en
     x=236..446 et le bouton en x=515..701, soit un groupe de 466 px sur 948,
     CENTRE (centre 468 pour une page centree a 474), avec 69 px entre les deux.
     Ramene au dessin de 1440 : 105 px de gouttiere. En space-between, le meme
     couple etait ecartele aux deux bords de la coque. */
  gap: 105px;
  align-items: center;
  justify-content: center;
}

/* Le titre de cette bande est un titre, pas une etiquette : sur la maquette il
   est en Cormorant Garamond a empattements francs, sans le tiret que
   .eyebrow::after ajoutait derriere lui. */
.gold-cta__grid h2 {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.18;
}

.gold-cta .eyebrow { color: #453325; }
.gold-cta h2 { color: #2b2016; }
.gold-cta p { margin: 0; color: #40311f; font-size: 15px; }

/* Variante de l ACCUEIL : titre serif sur deux lignes, bouton sombre POSE
   A COTE du titre et non au bout de la bande, filet sous les deux, puis la
   phrase. La photo d accueil telephonique se fond dans le bois a droite. */
.gold-cta--accueil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 44px;
  background: var(--gold-accueil);
}

.gold-cta__media { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 46%; }
.gold-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 33%; }

.gold-cta--accueil::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  background: linear-gradient(90deg,
    var(--gold-accueil) 0%,
    var(--gold-accueil) 50%,
    rgba(169, 124, 84, .82) 57%,
    rgba(169, 124, 84, .18) 66%,
    rgba(169, 124, 84, 0) 74%);
  pointer-events: none;
}

.gold-cta__accueil { position: relative; z-index: 2; }

.gold-cta__head {
  display: flex;
  gap: 48px;
  align-items: center;
  width: min(620px, 100%);
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(41, 37, 34, .30);
}

.gold-cta--accueil h2 {
  margin: 0;
  color: #2b2016;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.gold-cta--accueil .tint { color: var(--cream); }
.gold-cta--accueil p { margin: 20px 0 0; color: var(--cream); font-size: 15px; }

/* ---------------------------------------------------------- Page CONTACT -
   Bande sombre de coordonnees : quatre colonnes a picto, filets verticaux. */

.contact-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-bar li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 6px 24px;
  text-align: center;
}

.contact-bar li + li { border-left: 1px solid var(--rule-dark); }

.contact-bar strong {
  color: rgba(245, 241, 235, .74);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.contact-bar p {
  margin: 0;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
}

.contact-bar a { text-decoration: none; }
.contact-bar a:hover { color: var(--gold-light); }

.contact-bar__note {
  margin: 30px 0 0;
  color: rgba(245, 241, 235, .78);
  font-family: var(--serif);
  font-size: 19px;
  text-align: center;
}

/* Formulaire : deux colonnes, champs a filet fin, bouton sombre a texte or. */
.form { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.form__row--full { grid-column: 1 / -1; }

.form label { display: block; }

.form .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--rule);
  color: var(--ink);
  background: #fbfaf8;
  font-size: 14px;
}

.form textarea { min-height: 128px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #8d857c; }

.form button {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 24px;
  border: 0;
  color: var(--gold-light);
  background: #0f0e0d;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.form button:hover { background: #1c1916; }
.form__status { grid-column: 1 / -1; margin: 0; font-size: 13px; }

.sketch { margin-top: 26px; }
.sketch img { width: min(280px, 100%); }

/* ------------------------------------------------------------ Partenaires -
   Bandeau « Ils nous font confiance » de l accueil. */

.partners {
  display: flex;
  flex-wrap: wrap;
  gap: 34px 52px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La maquette montre les six logos EN COULEUR, pas en gris : c est une
   rangee de marques, pas une frise decorative. */
/* Les six fichiers arrivent en 447x447 comme en 251x62 : sans hauteur imposee,
   SOCOBOIS pesait un quart de FOUSSIER sur la meme rangee. Une contrainte en
   LARGEUR ne suffit pas non plus - elle laisse un logo carre minuscule a cote
   d un logo en bandeau. Hauteur imposee, largeur libre.
   Releve sur la maquette : les logos y font 55 a 85 px de haut a l echelle du
   dessin ; 72 est la moyenne qui garde la rangee equilibree. */
.partners li { display: flex; align-items: center; justify-content: center; height: 132px; }

/* HAUTEURS RELEVEES UNE PAR UNE sur la bande partenaires de la maquette
   d accueil (export 1672 px, facteur 1,176) : BSV 110 px, SOCOBOIS 53,
   FOUSSIER 53, MC 80, DICHAMP 61, HUMANOVA 95. Le client ne leur a pas donne
   la meme taille : le tilleul de BSV est deux fois plus haut que le pave
   FOUSSIER. Les egaliser a 72 px, c est effacer une hierarchie voulue - et
   c est BSV, le plus haut, qui y perdait le plus. */
.partners li:nth-child(1) img { height: 129px; }
.partners li:nth-child(2) img { height: 62px; }
.partners li:nth-child(3) img { height: 62px; }
.partners li:nth-child(4) img { height: 94px; }
.partners li:nth-child(5) img { height: 72px; }
.partners li:nth-child(6) img { height: 112px; }

/* Le plafond de largeur n est pas decoratif : sans lui, un logo en bandeau
   comme FOUSSIER, ramene a 72 px de haut, atteint 187 px et ecrase la rangee.
   Plafonne a 150, il redescend a 58 px de haut - le poids qu il a sur la
   maquette. */
.partners img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------- Diaporama accueil -
   Quatre vues, quatre textes. Un seul H1 : les trois autres legendes sont des
   paragraphes, sinon quatre H1 se neutralisent. */

.hero--slider .hero__media img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}

.hero--slider .hero__media img[data-active] { opacity: 1; }

/* V3, point 2 : « l animation des textes bug et est brusque, il faut que
   l effet soit plus doux et que les textes apparaissent de facon plus fluide ».

   Ce n etait pas une affaire de duree. Les legendes basculaient de
   « position: absolute » a « position: relative » au changement de vue : la
   legende sortante quittait le flux au moment meme ou l entrante y entrait, et
   la hauteur du conteneur sautait d une valeur a l autre en pleine transition.
   C est ce saut que l oeil lit comme un bug.

   Elles sont desormais EMPILEES DANS UNE GRILLE, toutes dans la meme cellule :
   aucune n a besoin de quitter le flux, la hauteur du conteneur vaut celle de
   la plus haute et ne bouge plus jamais. Le fondu croise se joue alors seul.
   La courbe remplace « ease » : une sortie douce, sans a-coup au demarrage. */
.slider__captions {
  position: relative;
  display: grid;
  /* La hauteur est imposee par le script, vue par vue ; elle glisse avec la
     meme courbe que le fondu pour que le filet et le bouton qui suivent
     accompagnent le changement au lieu de sauter. Sans script, elle reste
     « auto » et vaut celle du plus grand titre - ce qui est correct. */
  overflow: hidden;
  /* « start » et non l etirement par defaut : un enfant de grille s etire a la
     hauteur de la rangee, si bien que les QUATRE legendes mesuraient celle du
     plus grand titre. On mesurait alors la hauteur qu on venait d imposer, et
     le trou restait invisible a la mesure comme il etait visible a l ecran. */
  align-items: start;
  transition: height .72s cubic-bezier(.22, .68, .3, 1);
}

.slider__caption {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .72s cubic-bezier(.22, .68, .3, 1),
              transform .72s cubic-bezier(.22, .68, .3, 1);
  pointer-events: none;
}

.slider__caption[data-active] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.slider__dots { display: flex; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }

/* La BARRE reste haute de 2 px ; la CIBLE fait 24. « background-clip:
   content-box » cantonne la couleur a la boite de contenu, si bien que la
   marge interne agrandit la zone cliquable sans epaissir le trait.
   Ces reperes sont la seule commande manuelle du diaporama, et le seul
   recours de qui a reduit les animations : a 34 x 2 px, ils etaient hors
   d atteinte. */
.slider__dot {
  width: 34px;
  /* 24 px et non 2 : la boite est en « border-box », donc la hauteur declaree
     est la hauteur TOTALE. Avec 11 px de marge interne haut et bas, il reste
     2 px de contenu - et « background-clip: content-box » n y peint que ces
     2 px. La barre garde donc son epaisseur, la cible fait 24 x 34. Mesure
     avant correction : 34 x 2 px. */
  height: 24px;
  padding: 11px 0;
  border: 0;
  /* « background-color » et non le raccourci « background » : celui-ci
     reinitialise « background-clip » a border-box, et la barre serait alors
     peinte sur les 24 px de la cible au lieu de ses 2 px. C est le meme
     piege que sur « .button:hover » - un raccourci efface ce qu on n ecrit
     pas dedans. */
  background-color: rgba(245, 241, 235, .35);
  background-clip: content-box;
  cursor: pointer;
}

.slider__dots { align-items: center; margin-top: 19px; }

/* Meme raison : « background-color », sinon le repere actif redevient un pave
   de 24 px. Mesure avant correction : 48 lignes peintes a 2 dppx, soit 24 px
   CSS, la ou la barre doit en faire 2. */
.slider__dot[aria-selected='true'] {
  background-color: var(--gold-light);
  background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {
  .hero--slider .hero__media img,
  .slider__caption { transition: none; }
}

/* -------------------------------------------------------- Etapes de projet -
   Cinq colonnes CENTREES, filets verticaux entre elles. Le medaillon est le
   pictogramme de la marque, detoure par scripts/detourer-pictos.mjs : livre
   opaque sur blanc, il dessinait un carre sur la bande claire.
   Numero et intitule tiennent sur UNE ligne (« 1 - ETUDE »), en serif : la
   version precedente empilait un numero puis un intitule en capitales
   grasses, ce que la maquette ne montre nulle part. */

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li { padding: 0 18px; text-align: center; }
.steps li + li { border-left: 1px solid var(--rule); }

.steps__picto { display: block; width: 74px; height: 74px; margin: 0 auto 16px; }

/* V3, point 3 : « les numeros ne sont pas bien alignes ».
   Cormorant Garamond sert des chiffres ELZEVIRIENS par defaut : hauteur d x,
   et descendantes sur le 3, le 4 et le 5. Mesure de l encre a 4x, ecart entre
   le bas du chiffre et celui des capitales - etape 1 : -1 px, etape 2 : -1,
   etape 3 : +20, etape 4 : +13, etape 5 : +20. Les chiffres dansaient donc
   sous une ligne de titres parfaitement alignee.
   « lining-nums » demande les chiffres a hauteur de capitale, qui reposent
   tous sur la ligne de base. Le controle mesure a nouveau l encre apres coup :
   si la fonte ne livrait pas la variante, rien ne changerait et rien ne le
   dirait. */
.steps__number {
  color: inherit;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}
.steps__number::after { content: ' -'; }

/* Points 9 et 10 : « mettre en gras les titres » et « les chiffres a la
   meme hauteur que les titres ». Le chiffre partage la ligne de base du
   titre parce qu il est DANS le h3 ; c est la graisse qui manquait.

   600 et non 700 : Cormorant Garamond n est servi qu en 400, 500 et 600.
   Un « 700 » retombe sur le 600 sans que rien ne l indique - mesure, le
   meme texte rend 3713 pixels d encre aux deux valeurs. Ecrire 600, c est
   dire ce qui s affiche. Le gras demande est bien la : on vient de 400,
   soit 38 % d encre en plus. Un vrai Bold demanderait d ajouter le
   fichier « cormorant-garamond-700 » a site/assets/fonts/. */
.steps h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.steps p { line-height: 1.6; }

/* ------------------------------------------------------ Domaines (accueil) -
   Trois blocs : photo, puis titre, texte, mots-cles et lien. */

.domains {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.domains li { display: flex; flex-direction: column; background: var(--card-dark); }

/* Image 1,252:1 - releve : 303 px de large pour 242 de haut sur la maquette,
   et non le 4/3 suppose. */
.domains img { width: 100%; aspect-ratio: 1000 / 799; object-fit: cover; }

.domains__copy { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 16px; text-align: center; }

.domains h3 {
  margin-bottom: 8px;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.domains p { color: rgba(245, 241, 235, .78); line-height: 1.6; }

/* Les mots-cles portent un filet AU-DESSUS de chacun, plus un dernier sous
   la liste : quatre lignes encadrees, pas trois separateurs. */
.domains ul {
  margin: 14px 0 16px;
  padding: 0;
  color: rgba(245, 241, 235, .88);
  list-style: none;
}

.domains ul li {
  display: block;
  padding: 5px 0;
  background: none;
  border-top: 1px solid rgba(245, 241, 235, .17);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 1.3;
  text-transform: uppercase;
}

.domains ul li:last-child { border-bottom: 1px solid rgba(245, 241, 235, .17); }

/* La fleche vient de la maquette, mais elle est DECORATIVE : en ::after, le
   libelle du lien reste exactement celui du brief pour un lecteur d ecran ou un
   copier-coller. Dans le texte, il portait « ...savoir-faire → ». */
.domains__link::after { content: ' \2192'; }

.domains__link {
  /* Point 7 : « centrer les 3 textes dans les blocs noirs ». Tout y etait
     centre sauf ce lien, cale a gauche. */
  align-self: center;
  margin-top: auto;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- Pied -*/

.site-footer {
  padding-block: 54px 26px;
  color: rgba(245, 241, 235, .74);
  background: var(--dark);
  font-size: 14px;
}

/* Bloc CENTRE et resserre, a filets verticaux : le pied n occupe pas la
   coque entiere. Il n y a PAS de telephone - la maquette n en montre pas,
   et c est la seule des quatre a dessiner un pied. */
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  /* « flex-start » et non l etirement par defaut : la devise doit se caler sur
     la premiere ligne de liens, pas sur toute la hauteur du bloc. */
  align-items: flex-start;
  justify-content: center;
  padding-bottom: 34px;
}

.site-footer__brand { display: block; padding-right: 40px; }
.site-footer__brand img { width: 168px; height: auto; }

.site-footer__block { padding-inline: 40px; border-left: 1px solid rgba(245, 241, 235, .16); }
.site-footer__cols { display: flex; gap: 36px; }

/* Sous 640 px le pied est centre : deux colonnes de 2 et 4 liens y dessinaient
   un escalier, « Contact » et « FAQ » restant seuls et decales de 76 px. Une
   seule colonne se lit comme une liste. */
@media (max-width: 640px) {
  .site-footer__cols:nth-child(n) { display: block; }
  .site-footer__cols .site-footer__list + .site-footer__list { margin-top: 0; }
}

.site-footer h2 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 12px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-footer__list + h2 { margin-top: 20px; }

.site-footer__list { margin: 0; padding: 0; font-size: 13px; list-style: none; }
.site-footer__list li { padding: 4px 0; }
.site-footer__list a { text-decoration: none; }
.site-footer__list a:hover { color: var(--gold-light); }

/* Signature du client, mot pour mot. Elle differe de la baseline de la
   charte (« La force d une entreprise, la qualite de l artisan ») et du
   titre de la banniere : les trois formulations sont a arbitrer. */
/* V3, point 6 : « supprimer la colonne avec le slogan ». La devise avait ete
   posee en quatrieme colonne de la rangee le 01/09 au matin, pour satisfaire
   la seconde moitie du point 16 de la V2. Le client l a vue et l a retiree :
   l element n existe plus, ses regles non plus. Le pied revient a trois blocs -
   la marque, le plan du site, les moyens de contact. */

/* Les deux liens du bas etaient separes de 9,3 px - mesure. Une cible de
   15 px de haut n est acceptable que si ses voisines sont a 24 px au moins ;
   ici l exception ne jouait pas. Le remplissage vertical les ecarte sans
   toucher a la ligne de base. */
.site-footer__bottom a { display: inline-block; padding: 5px 8px; margin: -5px -2px; }

.site-footer__bottom {
  display: flex;
  gap: 26px;
  justify-content: center;
  padding-top: 18px;
  border-top: 1px solid var(--rule-dark);
  font-size: 12px;
}

.site-footer__bottom p { margin: 0; }

/* -------------------------------------------------------------------- FAQ -
   Depliage NATIF : <details>/<summary>. Pas une ligne de JavaScript, donc
   rien a demander a la politique de securite, et la page reste utilisable au
   clavier, a l impression et sans script. L attribut « name="faq" » referme
   la question precedente quand on en ouvre une autre : c est l accordeon,
   sans le code.                                                             */

.faq {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.faq > li { border-bottom: 1px solid var(--rule); }

.faq__question {
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: 20px;
  align-items: center;
  padding: 24px 6px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.32;
  color: var(--ink);
  transition: color .25s ease;
  /* Les deux ensemble : Firefox lit « list-style », Safari le pseudo. Sans
     quoi la fleche grise du navigateur double la notre. */
  list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--gold-texte); }

.faq__question:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.faq__numero {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--gold);
}

.faq__chevron {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}

/* La question ouverte passait a #b77a42 sur fond clair : 3,36:1, sous le
   seuil d un texte de 23 px. On prend la teinte de texte. */
.faq__item[open] .faq__question { color: var(--gold-texte); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__reponse {
  padding: 0 26px 28px 64px;
  color: var(--body);
}

.faq__reponse p {
  max-width: 66ch;
  margin: 0;
}

/* L ouverture se deroule au lieu de sauter. */
.faq__item[open] .faq__reponse { animation: faq-deroule .3s ease both; }

@keyframes faq-deroule {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  /* Le numero passe au-dessus : a 320 px, trois colonnes hachent la question
     en mots isoles. */
  .faq__question {
    grid-template-columns: 1fr 24px;
    gap: 4px 16px;
    font-size: 20px;
  }
  .faq__numero { grid-column: 1 / -1; }
  .faq__reponse { padding-left: 6px; padding-right: 6px; }
}

/* --------------------------------------------------------------- Reponses -*/

@media (max-width: 1180px) {
  /* Le bouton est passe dans .site-header__inner : « .site-header > .button »
     ne le designait plus, et il restait affiche a cote du bouton Menu. */
  .site-nav, .site-header__inner > .button { display: none; }
  .mobile-menu { display: block; }
  .director { grid-template-columns: 220px 1fr; }
  .director__detail { display: none; }
  .cards, .boxes { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(3, 1fr); }
  .values li:nth-child(4) { border-left: 0; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 26px 0; }
  .steps li:nth-child(4) { border-left: 0; }
}

@media (max-width: 900px) {
  /* « --gutter: 26px » etait redeclare ici : c est ce palier qui faisait
     reculer la coque de 43 px a 901 px. La valeur est desormais continue,
     declaree une seule fois en tete de feuille, et rend 26 px sous 900 px
     sans qu on ait a le redire. */
  /* La regle de la bande de presentation porte DEUX classes : sans reprise
     explicite ici elle bat « .split », la colonne de texte tombait a 91 px
     et le titre depassait de sa boite de 7 px. */
  .split, .domains, .projects, .section--presentation .split { grid-template-columns: 1fr; gap: 34px; }

  /* Les deux bandes a photo debordante de l accueil se remettent en pile :
     un fond perdu et son degrade n ont plus de sens sur une colonne. */
  .section--specialite { display: block; min-height: 0; padding-block: 0; }
  .section--specialite .section__bleed { position: relative; width: 100%; height: 240px; }
  .section--specialite::before { display: none; }
  .section--specialite .shell { padding-block: 44px; }
  .split__copy--droite { width: 100%; margin-left: 0; }
  .gold-cta--accueil { padding-block: 0 40px; }
  .gold-cta__media { position: relative; width: 100%; height: 210px; margin-bottom: 26px; }
  .gold-cta--accueil::before { display: none; }
  .gold-cta__head { flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; }
  .site-footer__top { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .site-footer__brand { padding-right: 0; }
  .site-footer__block { padding-inline: 0; border-left: 0; }
  .site-footer__cols { justify-content: center; }
  .split--media-left > :first-child { order: 0; }
  .hero__media { width: 100%; }
  .hero::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .72) 45%, rgba(0, 0, 0, .9) 100%);
  }
  .director { grid-template-columns: 1fr; }
  .contact-bar { grid-template-columns: repeat(2, 1fr); }
  .contact-bar li:nth-child(3) { border-left: 0; }
  .contact-bar li:nth-child(n+3) { padding-top: 26px; }
  .form { grid-template-columns: 1fr; }
  /* Les 105 px sont une GOUTTIERE HORIZONTALE, relevee sur la maquette
     ENTREPRISE. « gap » vaut pour les deux axes : en passant la bande en
     colonne, cette regle en faisait 105 px de VIDE VERTICAL entre la phrase
     et son bouton. Mesure sur le site en ligne, de 320 a 900 px : la bande
     montait a 292 px de haut contre 119 en large. On rend donc l ecart a la
     verticale, sans toucher a celui de la maquette. */
  .gold-cta__grid { flex-direction: column; align-items: flex-start; gap: 18px; }
  .site-footer__top { grid-template-columns: 1fr; gap: 30px; }
  /* « justify-content: center » ne gouverne plus que l axe VERTICAL une fois
     la boite passee en colonne : « align-items » restait a « stretch » et le
     texte se collait au bord gauche, sous un pied entierement centre. Mesure
     a 900 px : 353 px entre le centre du texte et celui de la coque. */
  .site-footer__bottom { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 38px; }
  h2 { font-size: 28px; }
  .eyebrow { font-size: 12px; }
  .section { padding-block: 44px; }
  .values, .boxes, .cards, .inline-notes, .steps { grid-template-columns: 1fr; gap: 22px; }
  /* La regle generique ne suffisait pas : « .values--six li:nth-child(...) »
     la bat en specificite et laissait un filet a gauche de « Patrimoine ».
     Mesure a 600 px avant correction : un seul element gardait un
     border-left, et c etait lui. On coupe a la meme specificite. */
  .values li + li, .boxes li + li, .steps li + li,
  .values--six li:nth-child(n), .values--four li:nth-child(n) { border-left: 0; }
  .values li, .steps li { padding-inline: 0; }
  .contact-bar { grid-template-columns: 1fr; }
  .contact-bar li + li { border-left: 0; padding-top: 24px; }
}

/* ------------------------------------------------ Le directeur, dispositif V2 -
   Point 20 : « changer le dispositif et la photo, supprimer les pictogrammes ».
   La maquette V2 pose la photo A FOND PERDU sur la gauche - elle touche le bord
   de la page, pas celui de la coque - et le texte a droite dans la coque. Les
   trois notes en bas de bande et la colonne de detail ont disparu.

   La PHOTO, elle, n a pas ete fournie : celle de la V1 reste en place, comme la
   regle le veut. A noter qu elle vient du dossier « IA » du client - c est un
   rendu, pas un cliche du reportage.                                          */

.section--directeur {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding-block: 56px;
  overflow: hidden;
}

/* La photo ne touche PAS le haut ni le bas de la bande : la maquette lui
   laisse une marge de sable, relevee au pixel a 4,2 % au-dessus et 4,7 %
   au-dessous de la hauteur de bande. Le commentaire precedent affirmait
   l inverse ; c est la maquette qui a raison. */
.section--directeur .section__bleed {
  position: absolute;
  inset: 4.2% auto 4.7% 0;
  width: 46%;
  margin: 0;
}

.section--directeur .section__bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le sujet est haut dans le cadre : centre, le recadrage coupait le visage. */
  object-position: center 22%;
}

/* Surtout PAS de « width: 100% » ici : « .shell » porte sa propre largeur -
   1130 px, centree par des marges automatiques - et un 100 % l ecrasait a
   1440. Le texte venait alors toucher le bord de la fenetre, et se coupait. */
.section--directeur .shell { position: relative; z-index: 2; flex: 0 1 auto; }
.section--directeur .director__copy { width: min(480px, 100%); margin-left: auto; }

/* ------------------------------------------- Groupe de photos (une + trois) -
   Point 19 : « modifier l agencement des photos ». La maquette V2 en montre
   quatre - une grande au-dessus, trois petites en rangee dessous. Le client
   demande l AGENCEMENT ; les images sont prises dans le reportage d atelier,
   et ce choix-la reste a confirmer par lui.                                   */

.photo-groupe { display: grid; gap: 14px; margin: 0; }

.photo-groupe__large {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.photo-groupe__rangee {
  display: grid;
  gap: 14px;
  /* Trois colonnes tant qu elles restent lisibles. En dessous de 520 px de
     fenetre, elles rendaient des vignettes de 80 x 60 px - mesure du controle
     independant a 320 px - ou l on ne distingue ni le geste ni la machine,
     pour des sources de 1600 a 2000 px. La rangee passe alors a deux
     colonnes, et la troisieme photo occupe la largeur entiere. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .photo-groupe__rangee:nth-child(n) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-groupe__rangee img:nth-child(3) { grid-column: 1 / -1; }
}

.photo-groupe__rangee img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* La colonne de texte ne peut PAS croiser la photo, quelle que soit la largeur :
   46 % pour la photo, au plus 52 % pour le texte. Sans cette borne, « min(480px,
   100%) » gardait ses 480 px meme quand la coque n en offrait plus assez. */
.section--directeur .director__copy { width: min(480px, 52%); }

@media (max-width: 980px) {
  /* La photo a fond perdu passe au-dessus du texte : a cette largeur, 46 % de
     colonne ne montre plus rien d une personne.
     980 et non 900 : entre les deux, la coque avait retreci mais la photo
     occupait toujours 46 % de la FENETRE, et le texte etait peint dessus.
     Mesure, balayage de 880 a 1080 px : 31 px de recouvrement a 920, 20 a 940,
     10 a 960 - et 960 est une largeur de fenetre courante. */
  .section--directeur { display: block; min-height: 0; padding-top: 0; }
  .section--directeur .section__bleed { position: static; width: auto; height: 320px; margin-bottom: 30px; }
  /* Empilee, la photo n a plus que 320 px de haut pour une source en
     portrait : le cadrage de 22 %, juste en pleine hauteur, coupait le haut
     du crane. On remonte le point d ancrage. */
  .section--directeur .section__bleed img { object-position: center 8%; }
  .section--directeur .director__copy { width: auto; margin-left: 0; }
}

/* ----------------------------- Le grain photographique des bandes (point 9) -
   « MEMO IMPORTANT - des photos opacifiees en fond de bandes. TRES LEGER pour
   que ca ne soit pas trop remarquable mais assez pour que ca donne une legere
   texture. Une bande sur deux, en fonction des bandes. Par exemple le footer
   ce serait bien. »

   Le visuel que le memo dit joindre n existe pas - le PDF ne contient aucune
   image. Mais le modele, lui, etait DEJA dans le site : la bande des TECHNIQUES
   porte depuis le point 27 de la V2 une photo de panneau de bois a 9 %, en
   niveaux de gris. C est la seule bande du site dans ce cas, et le client l a
   vue sans la reprendre. Elle sert donc d etalon, et le reste s y aligne.

   --------------------------------------------------------------- LA DOSE
   « Tres leger » est une direction, pas une valeur. On mesure l ecart-type de
   la luminance rendue, contenu de la bande masque (« scripts/mesure-fonds.mjs »).
   L etalon en porte 4,76. Deux autres surfaces y etaient deja, sans l avoir
   cherche : la bande des ENGAGEMENTS, texturee par son bruit et son halo, a
   4,58. Le site n a donc plus qu une seule dose, et c est celle-la.

   -------------------------------------------------------------- LE MOYEN
   Un VOILE de la couleur de la bande, pose par-dessus la photo, dans la meme
   propriete « background-image ». Un voile de couleur C a l opacite (1 - a)
   sur une photo P rend exactement ce que rendrait la photo a l opacite a sur
   un fond C : c est la meme somme, et la mesure le confirme sur la bande des
   TECHNIQUES, inchangee au centieme apres conversion.

   Pourquoi pas un pseudo-element, comme le faisait la bande des techniques :
   parce que « ::before » et « ::after » sont DEJA pris ailleurs - le halo dore
   des ENGAGEMENTS occupe le premier, le bruit fin des bandes sombres occupe le
   second. Une regle qui ne vaut que pour les bandes libres n est pas une regle.

   ------------------------------------------------------ UNE BANDE SUR DEUX
   L alternance se compte sur les bandes de la page, banniere exclue, et une
   bande qui porte deja une photo a fond perdu compte dans le rythme sans
   recevoir de grain - sinon deux images se disputeraient le meme fond.
   Verification a posteriori : les deux surfaces deja texturees du site, les
   TECHNIQUES et le bloc d appel FAQ, tombent l une et l autre sur un temps
   fort de cette alternance. Le rythme n a pas ete plaque, il etait la.

   --------------------------------------------------------- LES TEXTURES
   Prises dans le reportage d atelier du client, en niveaux de gris. Deux
   familles, parce qu une photo posee sur du papier l assombrit :
   - bandes sombres : la photo telle quelle, a 9 % ;
   - bandes claires : une version dont la moyenne a ete remontee au ton du
     papier (« -papier »), pour ne poser QUE le relief et pas le gris. Sans
     elle, une bande claire perdait 12 points de luminance et se lisait comme
     un aplat sale au lieu d une texture.
   Le poids est negligeable : elles sont vues a moins de 10 % et compressees en
   consequence - 3 a 11 ko chacune, mises en cache pour tout le site.          */

/* Le cadrage est le meme partout : deux couches, l une par-dessus l autre,
   toutes deux « cover ». Les selecteurs sont enumeres plutot que rassembles
   sous une classe utilitaire : le generateur ecrit deja le nom de la bande, et
   une classe de plus n aurait servi qu a repeter l information. */
.section--techniques,
.section--chantier,
.section--presentation,
.section--etapes,
.section--valeurs,
.section--questions,
.section--histoire,
.section--materiaux,
.section--formulaire,
.section--approche,
.site-footer {
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  /* « 100% 100% » et non « cover » : c est ce qui rend la dose STABLE.

     « cover » agrandit la texture pour remplir la bande, puis en coupe ce qui
     depasse - donc chaque bande en montre une PART DIFFERENTE. La meme texture,
     le meme reglage, rendaient 4,74 d ecart-type sur une bande de 437 px et
     12,43 sur une de 1609 px : la bande haute tombait sur une arete de moulure
     que la bande basse ne montrait pas. Etire, le fond montre toujours l image
     ENTIERE : sa statistique ne depend plus de la hauteur du texte.

     CE QUI SUIVAIT ICI ETAIT FAUX, et le client l a vu avant nous : « l
     etirement ne se voit pas, ces textures n ont ni sujet ni ligne droite a
     deformer ». Les deux moities sont dementies.

     Amplifiee quatre fois, la texture de l etabli montre l ARETE du plateau en
     diagonale, un TROU de cheville et un CERNE circulaire - donc un sujet, une
     ligne droite, et une perspective. Et l etirement, lui, n est pas anodin :
     cette bande fait 1440 x 441 au bureau et 390 x 1167 au telephone, soit
     4,4 fois plus de compression dans un sens que dans l autre. L arete
     redevenait alors un trait, et ce trait traversait « 3 - FABRICATION ».

     Le reglage « 100% 100% » reste le bon - il est la seule facon de rendre la
     dose independante de la hauteur de la bande, et c est un vrai acquis. Ce
     qui a change, c est la TEXTURE elle-meme : les deux fichiers sont passes
     par « scripts/refaire-texture-claire.mjs », qui plafonne le noir qu une
     texture a le droit de poser. Dans un haut de gamme, une arete est ce qu il
     y a de plus sombre et la fibre ce qu il y a de plus clair : le plafond
     efface l une sans toucher a l autre.

     Mesure, sur la boite des paragraphes, texte masque - « npm run
     verifier:texture ». L amplitude du fond sous un paragraphe, au telephone :

       etapes      33,5 -> 13,2        questions    38,6 -> 16,2
       valeurs     33,4 -> 13,2        formulaire   17,0 -> 13,1
       presentation 17,7 -> 11,0       histoire     17,0 -> 13,2

     Le banc garde le seuil, releve sur la bande de presentation d avant - la
     seule dont la lisibilite n avait jamais ete mise en cause.               */
  background-size: 100% 100%, 100% 100%;
}

/* Bandes sombres - la photo telle quelle, sous un voile a 91 %. */
.section--techniques {
  background-color: var(--dark);
  background-image:
    linear-gradient(rgba(20, 20, 20, .91), rgba(20, 20, 20, .91)),
    url('/assets/media/wood-panel.webp');
}

/* 88,1 % et non 91 : la dose se regle sur la MESURE, pas sur le reglage. Cette
   photo-ci est plus contrastee que celle des techniques ; au meme taux elle
   rendait 5,35 la ou l etalon rend 4,70. C est l ecart-type qui doit etre egal
   d une bande a l autre, pas le nombre ecrit dans la feuille. */
.section--chantier {
  background-color: var(--dark);
  background-image:
    linear-gradient(rgba(20, 20, 20, .881), rgba(20, 20, 20, .881)),
    url('/assets/media/grain-bois.webp');
}

/* Le pied de page : la seule bande que le memo nomme. */
.site-footer {
  background-color: var(--dark);
  background-image:
    linear-gradient(rgba(20, 20, 20, .91), rgba(20, 20, 20, .91)),
    url('/assets/media/grain-etabli.webp');
}

/* --------------------------------------------------- Les bandes claires -
   Elles ne peuvent pas recevoir le meme traitement que les sombres, et la
   premiere tentative l a montre en chiffres.

   Poser une photo sous un voile de papier marche sur une bande sombre, ou la
   photo ne fait qu eclaircir un noir. Sur une bande claire elle SALIT : la
   moyenne tombait de 12 points, et la bande se lisait comme un aplat gris.

   Pire, la dose n etait pas tenable. « cover » agrandit la photo pour remplir
   la bande : une bande de 437 px en montre une large tranche, une bande de
   1609 px en montre un detail agrandi deux fois. La meme photo, le meme
   reglage, rendaient donc 1,19 d ecart-type sur les ETAPES et 12,05 sur les
   QUESTIONS - dix fois la dose, pour la seule raison que la bande est plus
   haute. Un reglage qui depend de la hauteur du texte n est pas un reglage.

   Les deux defauts ont la meme cause : on posait les BASSES frequences de la
   photo - son ton general, son degrade - alors qu on ne voulait que les
   HAUTES : le relief, la fibre, le trou de cheville. La texture claire est
   donc un HAUT DE GAMME de la photo : on lui retire son propre flou, on ne
   garde que ce qui s en ecarte vers le sombre, et on pose ce reste sur du
   blanc. Il ne reste aucun degre general a poser, donc aucune salissure ; et
   comme le relief n a pas d echelle propre, l agrandissement ne change plus la
   dose - seulement la finesse du grain.

   Le fondu est MULTIPLICATIF : la texture assombrit le fond dans sa propre
   proportion. Une seule et meme texture tient donc sur le papier a 248 comme
   sur le papier chaud a 239, chacune gardant son ton. C est aussi pour cela
   qu il n y a pas de voile ici : la dose est deja dans le fichier.           */
/* DEUX textures claires, et deux seulement, en alternance d une bande a la
   suivante. Le choix des photos n est pas libre : il a fallu deux essais pour
   comprendre que la texture doit etre AMORPHE.

   Une photo de porte, etiree sur la bande de 1609 px de la FAQ, redessinait ses
   moulures en grand derriere les questions ; une photo de pieces posees sur un
   etabli, ecrasee sur la bande de 377 px des REALISATIONS, laissait voir leurs
   silhouettes. Toutes deux tenaient pourtant la dose au centieme : l ecart-type
   dit COMBIEN on voit, il ne dit pas QUOI. Il a fallu regarder.

   Ne restent donc que des surfaces sans sujet - une dalle de bois brut et le
   plateau d un etabli - dont aucun etirement ne peut faire une image.          */
.section--presentation {
  background-color: var(--paper-warm);
  background-image: url('/assets/media/grain-clair-bois.webp');
  background-blend-mode: multiply;
}

.section--histoire,
.section--materiaux,
.section--formulaire {
  background-color: var(--paper);
  background-image: url('/assets/media/grain-clair-bois.webp');
  background-blend-mode: multiply;
}

.section--etapes,
.section--valeurs,
.section--approche,
.section--questions {
  background-color: var(--paper);
  background-image: url('/assets/media/grain-clair-etabli.webp');
  background-blend-mode: multiply;
}

/* -------------------------------- Titre a filets, coupe en deux (point 26) -
   « Revenir a la ligne apres la virgule, et passer la seconde partie du texte
   en couleur. » C est la regle bicolore des autres titres.

   « .section-title » est une boite FLEX dont les deux filets sont les pseudo-
   elements de bord. Y glisser directement un <span class="tint"> en ferait un
   TROISIEME element de la rangee, pose A COTE du texte et non dessous. Le
   texte est donc enveloppe dans un span qui reste l unique element central ;
   la coupe a lieu a l interieur de lui.                                      */

.section-title__texte {
  display: block;
  flex: 0 1 auto;
  text-align: center;
}

/* V3, point 10 : « centrer le texte NOTRE APPROCHE ». Le titre et le
   paragraphe etaient deja centres - mesure - mais le SUR-TITRE ne l etait pas :
   « .eyebrow » est une boite flex, « text-align » n y a aucun effet, il faut
   « justify-content ». Son texte se posait a 415 px pour un centre de page a
   720, soit 305 px trop a gauche. Le filet de queue disparait avec, sinon le
   groupe « texte + filet » serait centre a la place du texte seul. */
.section--approche .eyebrow { justify-content: center; }
.section--approche .eyebrow::after { display: none; }

/* ------------------------------------------ Notre approche, centree (32-33) -
   Points 32 et 33 : « enlever la photo » et « centrer le texte ». La bande
   passe donc d une grille a deux colonnes a une colonne unique, centree. Le
   filet sous le titre doit suivre : cale a gauche, il trahirait le centrage. */

.section--approche .approche__copy {
  width: min(760px, 100%);
  margin-inline: auto;
  text-align: center;
}

.section--approche .rule { margin-inline: auto; }

/* --------------------------------------------- Les quatre themes (point 34) -
   « Ajouter un menu comme le menu principal avec les 4 themes ; lorsque l on
   clique sur un theme, ca change la rubrique photo du slide. »

   La barre reprend la grammaire du menu du haut : capitales, interlettrage,
   et un tiret dore sous l entree active. Ce sont des <button> et non des
   liens : ils ne menent nulle part, ils filtrent la galerie sur place - un
   lien qui ne navigue pas trompe le clavier et les lecteurs d ecran.       */

.themes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 38px;
  justify-content: center;
  margin-bottom: 34px;
}

.themes button {
  position: relative;
  padding: 8px 2px;
  border: 0;
  color: var(--body);
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease;
}

/* Meme mesure que pour la FAQ : a 12 px et graisse 600, l or de la charte
   rendait 3,36:1 - l entree ACTIVE etait la moins lisible des quatre. */
.themes button:hover { color: var(--gold-texte); }

.themes button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: '';
  background: var(--degrade-or);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .25s ease;
}

/* L entree active porte le meme tiret dore anime que le menu du haut. */
.themes button[aria-pressed='true'] { color: var(--gold-texte); }

.themes button[aria-pressed='true']::after {
  opacity: 1;
  animation: ccm-degrade 5s linear infinite;
}

.themes button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 700px) {
  .themes { gap: 8px 22px; }
  .themes button { font-size: 11px; letter-spacing: .06em; }
}

/* ------------------------------------------- Coordonnees du contact (42) -
   Elles prennent la place du croquis de porte, sous le texte « votre
   demande ». Trois entrees : adresse, courriel, Facebook - exactement celles
   de la maquette V2, dans son ordre.

   ⚠ L ADRESSE POSTALE vient de cette maquette et de nulle part ailleurs : le
   client ne l a jamais ecrite en toutes lettres. Elle est a confirmer.      */

.coordonnees {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.coordonnees li + li { margin-top: 20px; }

.coordonnees__intitule {
  margin: 0 0 4px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.coordonnees li > p:last-child {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-size: 15px;
}

.coordonnees .ico { width: 20px; height: 20px; stroke-width: 1.4; }
.coordonnees a { color: inherit; text-decoration: none; }
.coordonnees a:hover { color: var(--gold); }

/* --------------------------------- Les pictogrammes de la disponibilite (45) -
   Meme rangee qu avant, mais les dessins sont ceux du client. Ils sont deja
   cercles : le medaillon ne se redessine pas en CSS.                        */

.inline-notes--pictos .picto { width: 52px; height: 52px; margin: 0 auto 12px; }

/* ------------------------------------------------- L appel vers la FAQ (47) -
   La maquette V2 la dessine sur un fond de bois clair, titre a gauche et
   bouton a droite. C est le point d entree vers la page creee au point 49. */

.faq-appel {
  /* Meme bois que la barre de menu, donc meme voile : sans lui, ce bloc-ci
     serait reste deux fois plus marque que l en-tete qui le surplombe.
     Mesure avant voile : ecart-type 9,66 pour 10,49 a l en-tete. */
  background-color: var(--paper-warm);
  background-image:
    linear-gradient(rgba(240, 239, 237, .53), rgba(240, 239, 237, .53)),
    url('/assets/media/texture-menu-horizontal.webp');
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  padding-block: 58px;
}

.faq-appel__grille {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: center;
  justify-content: space-between;
}

.faq-appel h2 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.faq-appel p { margin: 0; }
.faq-appel__action { flex: 0 0 auto; }

@media (max-width: 700px) {
  .faq-appel h2 { font-size: 26px; }
  .faq-appel__grille { justify-content: flex-start; }
}

/* --------------------------------------------- Bande « avis clients » (38) -
   RELEVE sur la maquette V2 des REALISATIONS, facteur d echelle 2,00 - deduit,
   pas suppose : la bande d appel doree qui la suit y porte exactement
   #C3A582, la meme valeur que « --gold-band », et le pas des quatre colonnes
   vaut 500 px de maquette pour 250 px de coque.

   Le fond est la SEULE surface rose du site. Mesure : mediane (250, 240, 241)
   sur un echantillon pris hors de tout texte.                                */

.section--avis { background: #faf0f1; }

/* Le sur-titre de cette bande est centre, au-dessus d un titre a filets ;
   ailleurs sur le site il est cale a gauche au-dessus d une colonne.
   « .eyebrow » est une boite FLEX : « text-align » n y mord pas, il faut
   « justify-content ». Et son filet de queue disparait - la maquette n en
   montre aucun ici, le titre qui suit porte deja les siens. */
.section--avis .eyebrow { justify-content: center; }
.section--avis .eyebrow::after { display: none; }
.section--avis .section-title { margin-bottom: 48px; }

.avis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.avis__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.avis__portrait {
  width: 108px;
  height: 108px;
  margin-bottom: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* La bande d etoiles est servie a 400 px pour 100 affiches : « height: auto »
   la laisse suivre son propre rapport, que les attributs du HTML declarent. */
.avis__etoiles {
  width: 100px;
  height: auto;
  margin-bottom: 18px;
}

/* La teinte de la charte, #B77A42, rend 3,25:1 sur ce rose - sous le seuil de
   4,5 exige d un texte de cette taille. Ces deux lignes sont NEUVES : elles
   prennent donc la teinte de texte, comme la barre de themes et les questions
   de la FAQ. Les sur-titres de la charte, eux, gardent leur couleur. */
.avis__nom {
  margin: 0 0 14px;
  color: var(--gold-texte);
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.avis__texte {
  /* 34 caracteres : au-dela, l oeil perd la ligne suivante en revenant a la
     marge. Sans cette borne, la colonne unique servait la citation sur 508 px
     a 560 px de fenetre - mesure - soit environ 85 signes par ligne. */
  max-width: 34ch;
  margin: 0 auto 20px;
  /* « blockquote » porte une marge laterale par defaut dans tous les
     navigateurs : sans cette remise a zero, la colonne serait desaxee. */
  padding: 0;
  border: 0;
}

.avis__texte p {
  margin: 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.45;
}

/* 16 px et non 14 : sous ce seuil, Safari iOS agrandit la page a la mise au
   point d un champ, et le formulaire sort du cadre entre chaque question.
   La regle ne vise que les largeurs tactiles : sur grand ecran, le corps de
   14 px de la maquette est conserve. */
@media (max-width: 700px) {
  .form input:nth-child(n),
  .form select:nth-child(n),
  .form textarea:nth-child(n) { font-size: 16px; }
}

.avis__date {
  margin: auto 0 0;
  color: var(--gold-texte);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Le passage se fait en TROIS temps, et le seuil des quatre colonnes est a
   1080 px, pas a 900.

   Mesure du controle independant : ecrit a 900, il faisait tomber la colonne
   de 409 px a 178,8 px pour UN pixel de fenetre en plus - une perte de 56 %.
   A 901 px les citations passaient de 2 a 5 lignes, dont une de deux mots, et
   les noms « Philippe Cheurlin » et « Dominique Royer » se cassaient en deux
   quand « Rudy Bernet » tenait sur une : les quatre citations ne demarraient
   plus a la meme hauteur.

   1080 px est la largeur a partir de laquelle quatre colonnes valent au moins
   240 px, soit la largeur des colonnes de la maquette. */
@media (max-width: 1080px) {
  .avis:nth-child(n) { grid-template-columns: repeat(2, 1fr); gap: 44px 30px; }
}

/* 460 et non 560 : a 560 px de fenetre, deux colonnes font encore 254 px -
   la largeur meme des colonnes de la maquette. Passer a une seule des 560
   gaspillait la place et allongeait les lignes. En dessous de 460, deux
   colonnes tomberaient sous 200 px et la citation se casserait en mots. */
@media (max-width: 460px) {
  .avis:nth-child(n) { grid-template-columns: 1fr; }
}

/* ------------------------- La galerie quand le script principal a echoue -
   Le repli « sans JavaScript » (ccm-nojs.css) ne se charge que si JavaScript
   est DESACTIVE. Si le module principal echoue alors que JavaScript marche -
   un fichier qui ne repond pas, une erreur au chargement - ce repli ne
   s applique pas : la piste de la galerie reste une rangee de 6 335 px
   decoupee a 1 130, sans defilement ni fleche. Mesure d un controleur
   independant : 13 des 16 realisations inatteignables, et 13 images
   differees qui ne se chargent jamais.

   « html:not(.js-anim) » couvre les DEUX cas : la classe n est jamais posee
   sans JavaScript, et elle est RETIREE par le filet de ccm-anim.js quand le
   module n a pas pris la main. La galerie retombe alors sur la meme grille
   que le repli sans script. */
html:not(.js-anim) .themes { display: none; }
html:not(.js-anim) .gallery__viewport { overflow: visible; mask-image: none; }
html:not(.js-anim) .gallery__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  transform: none !important;
}
html:not(.js-anim) .gallery__item { flex: none; }

/* --------------------------------- La bulle de discussion sur le CONTACT -
   L accroche que Chatbase deplie tout seule - « Bonjour, je suis Lea... » -
   fait 567 x 72 px et se pose en bas a droite. Sur la page CONTACT, elle
   recouvre 25 300 px2 de formulaire : mesure d un controleur independant, le
   centre du champ TELEPHONE, pourtant obligatoire, n est plus atteignable au
   clic. Sur la page dont c est tout l objet.

   Elle est donc masquee ICI, et seulement ici : le BOUTON de la bulle reste,
   la discussion reste accessible d un clic, et l accroche continue de
   s afficher sur les cinq autres pages ou elle ne coute rien.

   Cet element appartient au widget mais vit dans NOTRE document - verifie -
   donc la feuille l atteint. Rien n est touche du cote de Chatbase : le
   reglage d origine se change depuis leur tableau de bord. */
/* « !important » est ici NECESSAIRE, pas commode : le widget pose son affichage
   en ATTRIBUT « style » sur cet element, et un style en ligne l emporte sur
   toute regle de feuille. Mesure sans lui : la regle ne mordait pas, le champ
   TELEPHONE restait inatteignable. */
body[data-page="contact"] #chatbase-message-bubbles { display: none !important; }

/* ---------------------------------------------- Les pictogrammes du client -
   « .ico » dessine un <svg> trace a la main ; « .picto » sert un fichier livre
   par le client, detoure. Les deux coexistent : toutes les bandes n ont pas
   recu de dessin le 31/08, et celles qui n en ont pas gardent le leur.
   44 px et non 34 : ces dessins sont des medaillons cercles, le trait utile
   n occupe qu environ les trois quarts du carre.                            */

.picto {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: block;
}

/* 58 px et non 44 : la maquette dessine ces medaillons nettement plus
   grands. Rapport medaillon / hauteur de capitale du titre : 4,58 sur la
   maquette, 3,38 a 44 px. Un rapport est insensible au facteur d echelle
   de l export, contrairement a une mesure en pixels. */
.values .picto { width: 58px; height: 58px; margin: 0 auto 14px; }

/* Sur les bandes sombres, la V1 eclaircissait ses icones tracees a la main
   (« .section--dark .ico { stroke: var(--gold-light) } »). Les dessins du
   client sont des images : cette regle ne les atteint pas, et leur trait
   cuivre y tombait a 3,57:1 de contraste - au-dessus du seuil, mais en
   dessous de ce que la page faisait avant. On le releve du meme geste. */
.section--dark .picto,
.section--black .picto { filter: brightness(1.28); }

/* La graisse des valeurs a fait l aller-retour, et c est la mesure qui
   tranche. Le PDF de l ENTREPRISE ne parle pas de gras, d ou un premier
   passage a 400. Mais la maquette, elle, en montre : ramene a la meme
   hauteur de capitale et a la meme resolution, le mot PASSION y porte plus
   d encre qu un 400. L image tranche quand le texte est muet - c est la
   regle du client. On garde donc la graisse des autres bandes. */
.boxes .picto { width: 38px; height: 38px; }

/* -------------------------------------- Partenaires : le ruban qui defile -
   Point 15 : « en faire un slide defilant ». Le client annonce d autres logos ;
   un ruban en absorbe un de plus sans qu on retouche la mise en page.

   Deux copies de la meme serie se suivent. La premiere sort par la gauche
   pendant que la seconde entre : quand la premiere a parcouru sa propre
   largeur, la seconde occupe exactement sa place de depart, et la boucle ne
   montre aucun saut. La copie porte aria-hidden : sans cela un lecteur d ecran
   annoncerait douze partenaires pour six.                                    */

.partners-ruban {
  display: flex;
  width: 100%;
  overflow: hidden;
  /* Les logos s effacent aux deux bords au lieu d etre coupes net. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.partners-ruban .partners {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0 72px;
  justify-content: space-around;
  min-width: 100%;
  padding-inline: 36px;
  animation: ccm-ruban 34s linear infinite;
}

@keyframes ccm-ruban { to { transform: translateX(-100%); } }

/* Le ruban s arrete au survol : on ne lit pas un logo qui fuit. */
.partners-ruban:hover .partners { animation-play-state: paused; }

/* ------------------------------------------------------ Pied de page (16) -
   « Eloigner le texte des menus du site. » Le bloc respire davantage en bas.

   La marge de la devise etait redeclaree ICI, plus bas que sa regle d origine
   et a specificite EGALE : elle gagnait donc par l ordre, et toute correction
   ecrite plus haut restait sans effet. La seconde moitie du point 16 ayant
   fait de la devise une colonne de la rangee, cette redeclaration ne peut plus
   exister - elle est retiree, et sa regle unique est celle du bloc pied de
   page.                                                                     */

.site-footer__top { padding-bottom: 46px; }

/* --------------------------------------------- Complements de composition -*/

/* Six engagements : trois colonnes, deux rangs. Le filet vertical repart a
   chaque debut de rang, sinon il pend dans le vide. */
.values--six { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
.values--six li:nth-child(3n+1) { border-left: 0; }

/* Titre et texte des cartes de domaine (REALISATIONS). Ce sont des <span> :
   la carte entiere est un bouton, et un bouton ne peut pas contenir de titre. */
.cards__title {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.18;
  text-transform: uppercase;
}

.cards__text {
  display: block;
  margin-bottom: 16px;
  color: rgba(245, 241, 235, .78);
  line-height: 1.55;
}

.cards__arrow { display: block; margin-top: auto; color: var(--gold-light); font-size: 17px; }

.cta-center { margin-top: 26px; text-align: center; }

/* Le film de presentation occupe la moitie droite de la barre 3 de l accueil. */
.film video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Mots-cles sous le diaporama de l accueil. */
.hero__services {
  margin: 0 0 30px;
  color: var(--cream);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero__services span { margin-inline: 10px; color: var(--gold-light); }

/* Le titre centre peut faire deux lignes : il ne doit pas ecraser ses filets. */
.section-title { flex-wrap: nowrap; }

@media (max-width: 900px) {
  .values--six { grid-template-columns: repeat(2, 1fr); }
  .values--six li:nth-child(3n+1) { border-left: 1px solid var(--rule); }
  .values--six li:nth-child(2n+1) { border-left: 0; }
}

@media (max-width: 640px) {
  .values--six { grid-template-columns: 1fr; }
  .values--six li { border-left: 0; }
}

/* Le titre centre suit les cartes de domaine : sans marge haute, il venait
   mordre dessus. */
.cards + .section-title { margin-top: 52px; }

/* Bande sombre dont la photo touche le bord gauche et toute la hauteur, comme
   au bas de la maquette CONTACT. */
.section--media-bleed { position: relative; padding-block: 0; }

.section--media-bleed .shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 420px;
  padding-block: 54px;
}

.section--media-bleed .section__bleed {
  position: absolute;
  inset: 0 auto 0 0;
  /* Du bord gauche de la fenetre jusqu a la fin de la colonne de gauche, soit
     la moitie de la fenetre moins la demi-gouttiere. Une formule qui ajoutait
     la marge de coque la comptait deux fois, et la photo recouvrait le texte. */
  width: calc(50% - 32px);
}

.section--media-bleed .section__bleed img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .section--media-bleed .shell { grid-template-columns: 1fr; min-height: 0; }
  .section--media-bleed .section__bleed { position: relative; width: 100%; height: 260px; }
}

/* Les textes du diaporama sont des phrases entieres, pas des titres de deux
   mots : la colonne doit etre plus large que sur les pages a bandeau fixe,
   sinon « La force d une entreprise, la qualite de l artisan. » tient sur
   quatre lignes. */
.hero--slider .hero__copy { width: min(640px, 100%); }

@media (max-width: 1180px) {
  .split { grid-template-columns: 1fr 1fr; }
  .director { grid-template-columns: 280px 1fr; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .director { grid-template-columns: 1fr; }
}

/* Quand la photo passe a gauche, c est elle qui doit prendre la colonne large :
   sinon elle herite de la colonne de texte et retrecit de moitie. */
.split--media-left { grid-template-columns: 1fr 0.76fr; }

@media (max-width: 1180px) { .split--media-left { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .split--media-left { grid-template-columns: 1fr; } }

/* Les photos des bandes en deux colonnes remplissent leur colonne : un
   recadrage de maquette de 455 px flottait au milieu d une colonne de 600. */
.split figure img { width: 100%; }

/* Quatre tuiles dans une grille de cinq colonnes laissaient une colonne vide a
   droite : la rangee paraissait tronquee. */
.values--four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1180px) {
  .values--four { grid-template-columns: repeat(2, 1fr); }
  .values--four li:nth-child(2n+1) { border-left: 0; }
}

@media (max-width: 640px) {
  .values--four { grid-template-columns: 1fr; }
  .values--four li { border-left: 0; }
}

/* Un enfant de grille garde par defaut la largeur minimale de son contenu :
   les trois notes du directeur imposaient 491 px dans une colonne de 338, et
   la page debordait de 127 px sur mobile. min-width:0 leve ce plancher. */
.director > *, .split > *, .gold-cta__grid > * { min-width: 0; }

@media (max-width: 900px) {
  .notes { grid-template-columns: 1fr; gap: 16px; }
}

/* `.split__copy p` etait plus specifique que `.eyebrow` : le surtitre heritait
   de la couleur du texte courant au lieu de l or de la charte. Le surtitre est
   un <p>, il faut donc l exclure explicitement. */
.split__copy p.eyebrow { color: var(--gold); }

/* Meme piege, meme parade : « .split__copy p » vaut (0,1,1) et battait
   « .coordonnees__intitule » a (0,1,0). Mesure : les trois intitules
   sortaient en rgb(63,58,54), du gris d encre, la ou la maquette les
   dessine en cuivre. */
.split__copy p.coordonnees__intitule { color: var(--gold); }

/* LES SUR-TITRES GARDENT LA COULEUR DE LA CHARTE, ET C EST DELIBERE.
   Mesure : #b77a42 sur la bande claire #f8f8f6 rend 3,36:1 a 13 px et graisse
   600 - sous le seuil de 4,5 qu un texte de cette taille demande. Sur le sable
   #ece4db, c est pire encore.
   Une teinte plus foncee reglerait le contraste, mais #b77a42 est LA COULEUR
   D ACCENT DE LA CHARTE fournie par le client : la changer, c est toucher a son
   identite, pas a une feuille de style. Un test la garde d ailleurs
   explicitement (tests/rubriques.test.mjs, « la charte typographique est
   appliquee »).
   C est donc une decision qui lui revient, et elle est portee au releve
   docs/V2-2026-08-31-RELEVE-DES-DECISIONS.md. La teinte « --gold-texte » existe
   et est prete : elle ne sert pour l instant qu aux elements NOUVEAUX, dont le
   dessin nous appartient - la barre de themes et les questions de la FAQ. */
.section--dark .split__copy p.eyebrow,
.section--black .split__copy p.eyebrow { color: var(--gold-light); }

/* Les trois notes en ligne tiennent sur une colonne de 404 px a 960 px de
   fenetre : elles debordaient de 10 px. */
.inline-notes > li { min-width: 0; }

@media (max-width: 1180px) {
  .inline-notes { grid-template-columns: 1fr; gap: 18px; }
  .inline-notes--center li { flex-direction: row; text-align: left; }
  .inline-notes--center strong { margin-top: 0; }
}

/* Le voile de la bande sombre a photo debordante doit rester assez dense sous
   les libelles : « QUALITE & DURABILITE » passait sur un bois clair. */
.section--media-right::before {
  background: linear-gradient(90deg,
    var(--dark) 0%, var(--dark) 54%, rgba(20, 20, 20, .96) 70%, rgba(20, 20, 20, .74) 100%);
}

/* Le croquis est un dessin au trait sur fond clair : recadre dans la maquette,
   son blanc (#F3F0ED) ne coincide pas avec celui de la bande (#F8F8F6) et
   dessinait un rectangle. En multiplication, seul le trait subsiste. */
.sketch img { mix-blend-mode: multiply; }

/* ============================================================================
   MOUVEMENT ET MATIERES
   ============================================================================
   Une maquette est une image : elle ne peut pas dessiner le mouvement. Tout ce
   qui suit vient donc s ajouter a ce qu elle montre, sans deplacer une seule de
   ses mesures - les apparitions ne touchent qu opacity et transform, qui ne
   changent aucune boite de mise en page.

   Deux garde-fous, et ils comptent autant que les effets :
   - tout le bloc « apparition » est conditionne a html.js-anim, que le script
     pose lui-meme. Sans JavaScript, rien n est masque : la page reste entiere ;
   - la derniere media query rend TOUT inerte des que le visiteur a demande de
     reduire les animations. Un mouvement qu on ne peut pas refuser est une gene,
     pas une decoration.
   ------------------------------------------------------------------------- */

/* --- Apparition au defilement ---------------------------------------------- */

html.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.22, .68, .3, 1),
              transform .75s cubic-bezier(.22, .68, .3, 1);
}

html.js-anim [data-reveal].is-in { opacity: 1; transform: none; }

/* Les listes arrivent en cascade : les enfants se decalent l un apres l autre.
   Le retard est porte par des :nth-child et non par une variable posee en style
   inline - l en-tete CSP declare style-src 'self', un style inline serait
   ignore sans le moindre message d erreur. */
html.js-anim [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, .68, .3, 1),
              transform .7s cubic-bezier(.22, .68, .3, 1);
}

html.js-anim [data-reveal-group].is-in > * { opacity: 1; transform: none; }
html.js-anim [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms; }
html.js-anim [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 90ms; }
html.js-anim [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 180ms; }
html.js-anim [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 270ms; }
html.js-anim [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 360ms; }
html.js-anim [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 450ms; }
html.js-anim [data-reveal-group].is-in > *:nth-child(n + 7) { transition-delay: 540ms; }

/* Le filet dore se trace au lieu d apparaitre. */
html.js-anim [data-reveal] .rule,
html.js-anim [data-reveal] .hero__rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s .2s cubic-bezier(.22, .68, .3, 1);
}

html.js-anim [data-reveal].is-in .rule,
html.js-anim [data-reveal].is-in .hero__rule { transform: scaleX(1); }

/* --- En-tete qui se resserre ----------------------------------------------- */

.site-header__inner { transition: padding-block .35s ease; }
.site-header { transition: background-color .35s ease, box-shadow .35s ease; }

/* LE RESSERREMENT NE VAUT QUE POUR L EN-TETE QUI FLOTTE.
 *
 * L en-tete a bandeau est DANS LE FLUX : lui retirer 26 px de rembourrage au
 * franchissement du seuil remonte tout le contenu d autant. Mesure du
 * 02/09/2026, sur les trois pages essayees : le haut du contenu passe de 97 a
 * 75 px pendant qu on defile - c est le « saut du menu ».
 *
 * L en-tete sombre, lui, est hors du flux (« absolute » puis « fixed ») : il
 * peut se resserrer sans rien deplacer. Le resserrement lui reste donc reserve.
 * Le reste de l effet - fond, ombre, adherence - vaut pour les deux.
 */
.site-header[data-scrolled]:not(.site-header--bandeau) .site-header__inner { padding-block: 13px; }

/* L en-tete sombre se pose SUR le diaporama : il est « absolute », donc hors
   du flux, et passer a « fixed » ne deplace rien - mais il defilait quand meme
   hors de l ecran avant de revenir. Il devient fixe d emblee ; seul son fond
   arrive au seuil, en fondu. */
.site-header:not(.site-header--bandeau) {
  position: fixed;
  transition: background-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}

.site-header[data-scrolled]:not(.site-header--bandeau) {
  background-color: rgba(16, 14, 12, .9);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}

/* Au-dela du seuil, seule l APPARENCE change - et elle se fond. L ombre
   apparait, rien ne se deplace. */
.site-header--bandeau {
  transition: box-shadow .45s ease;
}

.site-header--bandeau[data-scrolled] {
  box-shadow: 0 10px 30px rgba(41, 37, 34, .11);
}

/* --- Diaporama : fondu croise et lente derive ------------------------------ */

@keyframes ccm-derive {
  from { transform: scale(1.075); }
  to { transform: scale(1); }
}

@keyframes ccm-monte {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

html.js-anim .hero--slider [data-slide] { transition: opacity 1.1s ease; }
html.js-anim .hero--slider [data-slide][data-active] { animation: ccm-derive 11s ease-out both; }
/* V3, point 2, seconde moitie. Cette ligne posait une ANIMATION par-dessus la
   transition deja declaree sur « .slider__caption ». Une animation l emporte
   sur une transition tant qu elle dure ; et quand « data-active » disparait,
   l animation ne se termine pas en douceur - elle CESSE. La legende sortante
   retombait donc de 1 a 0 en UNE image, avec un saut de 14 px, suivi de 52 ms
   ou plus aucun texte n etait a l ecran. Mesure d un controleur independant,
   114 images relevees a 17,5 ms : pas maximal de 1,0000 en sortie contre
   0,0341 en entree.
   La transition suffit, et elle joue dans les DEUX sens. */

/* --- Reliefs au survol ----------------------------------------------------- */

/* « .domains article » ne designait RIEN : la liste des domaines est faite de
   <li>, elle n a jamais porte d <article>. Le relief au survol - le soulevement,
   l ombre, le rapprochement de la photo - ne s appliquait donc a aucune des
   quatre cartes de l accueil, et c est justement ce que le point 16 de la V3
   reproche : « le survol n est pas assez marque ».
   Verification : 14 occurrences de « domains » dans le HTML livre, zero
   <article>.

   « .cards » et « .projects » sont partis avec eux : ZERO occurrence dans les
   pages livrees. « .cards » a ete remplace par « .themes » au point 34 du
   31/08 ; « .projects » ne survit que dans les dix maquettes archivees, qui
   ont leurs propres feuilles. Un selecteur fossile ne fait pas de bruit - il
   fait juste que personne ne remarque que la regle ne mord plus. */

.domains li,
.gallery__item {
  transition: transform .45s cubic-bezier(.22, .68, .3, 1), box-shadow .45s ease;
}

/* « :nth-child(n) » n ajoute aucune condition - toute carte est le n-ieme
   enfant de quelqu un - mais il ajoute UN CRAN DE SPECIFICITE, et c est tout
   son role. Sans lui, la regle d apparition
   « html.js-anim [data-reveal-group].is-in > * », plus specifique d un cran,
   imposait « transform: none » et le soulevement ne se voyait pas : mesure,
   l ombre et le zoom de la photo arrivaient bien, la carte ne bougeait pas
   d un pixel. A specificite egale, c est l ordre qui tranche, et cette regle
   vient apres. */
.domains li:hover:nth-child(n) {
  transform: translateY(-7px);
  box-shadow: 0 22px 44px rgba(20, 16, 12, .22);
}

.gallery__item:hover { transform: translateY(-5px); }

/* La photo se rapproche DANS son cadre, le cadre ne bouge pas.

   « .domains li figure » ne designait RIEN : ces cartes n ont pas de <figure>,
   l <img> est fille directe du <li>. Rien ne rognait donc la photo, et son
   agrandissement la faisait SORTIR de la carte : mesure au survol, a 1440,
   carte 358 px et photo 379,5 px - 10,7 px de debord de chaque cote, pendant
   que le bloc de texte, lui, restait a 358. C est exactement ce que l oeil
   signalait : la photo ne grandissait pas avec la carte, elle grandissait
   CONTRE elle. Deuxieme selecteur fossile de ce bloc, apres « .domains
   article » ; celui-la ne se voyait pas en disparaissant, mais en debordant. */
.domains li,
.gallery__item { overflow: hidden; }

/* UN SEUL TEMPO POUR TOUTE LA CARTE, et c est celui de la CARTE.
   La photo durait .8s et la carte, croyait-on, .45s. Mesure : la carte dure
   0,7s. Ce n est pas cette regle-ci qui le decide, c est celle de
   l apparition - « html.js-anim [data-reveal-group].is-in > * » - dont la
   specificite (0,3,1) bat la notre (0,1,1). La feuille documente deja ce duel
   quelques lignes plus haut, pour le soulevement ; il valait aussi pour la
   duree.

   On n essaie donc pas de reprendre la main : imposer un tempo a la carte
   demanderait de battre la regle d apparition, donc d accelerer aussi
   l entree - une animation validee, qui n a rien demande. C est la photo qui
   s accorde sur la carte. Meme duree, meme courbe, et une amplitude ramenee
   de 6 a 3 % : assez pour qu elle respire, assez peu pour qu elle fasse
   encore bande a part du texte. */
.domains li img { transition: transform .7s cubic-bezier(.22, .68, .3, 1); }
.domains li:hover img { transform: scale(1.03); }

/* La galerie garde son tempo long : ses vignettes sont des photos SEULES,
   sans bloc de texte a cote, donc rien avec quoi se desaccorder. */
.gallery__item img { transition: transform .8s cubic-bezier(.22, .68, .3, 1); }
.gallery__item:hover img { transform: scale(1.06); }

/* --- Les pictogrammes d etape ---------------------------------------------- */

/* Ce sont les seuls dessins de la page : ils meritent une entree, pas une
   simple apparition. Chacun arrive en pivotant et en grandissant, l un apres
   l autre, et un halo dore s ouvre derriere lui au meme moment.
   Le halo est porte par le <li> et non par l image : un <img> ne peut pas avoir
   de pseudo-element. */
.steps li { position: relative; }

.steps li::before {
  position: absolute;
  z-index: 0;
  top: -10px;
  left: 50%;
  width: 96px;
  height: 96px;
  transform: translateX(-50%) scale(.2);
  content: '';
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 122, 66, .3) 0%, rgba(183, 122, 66, 0) 70%);
  pointer-events: none;
}

.steps__picto { position: relative; z-index: 1; }

html.js-anim .steps[data-reveal-group] .steps__picto {
  transform: scale(.45) rotate(-24deg);
  opacity: 0;
  /* Un ressort franc : le picto depasse sa taille puis se pose. */
  transition: transform .85s cubic-bezier(.18, 1.5, .38, 1), opacity .45s ease;
}

html.js-anim .steps[data-reveal-group].is-in .steps__picto { transform: none; opacity: 1; }

html.js-anim .steps[data-reveal-group].is-in li::before {
  animation: ccm-halo 1.1s ease-out both;
}

@keyframes ccm-halo {
  0%   { opacity: 0; transform: translateX(-50%) scale(.2); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

/* Les retards : le picto part avec sa colonne, le halo un souffle apres. */
html.js-anim .steps[data-reveal-group].is-in li:nth-child(1) .steps__picto { transition-delay: 60ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(2) .steps__picto { transition-delay: 190ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(3) .steps__picto { transition-delay: 320ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(4) .steps__picto { transition-delay: 450ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(5) .steps__picto { transition-delay: 580ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(1)::before { animation-delay: 60ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(2)::before { animation-delay: 190ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(3)::before { animation-delay: 320ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(4)::before { animation-delay: 450ms; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(5)::before { animation-delay: 580ms; }

/* Une fois poses, ils flottent tres lentement, chacun a son rythme : cinq
   medaillons qui montent et descendent ensemble feraient une vague, cinq qui
   respirent chacun de son cote font un atelier. */
@keyframes ccm-flotte {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

html.js-anim .steps[data-reveal-group].is-in li:nth-child(1) .steps__picto { animation: ccm-flotte 3.4s 1.2s ease-in-out infinite alternate; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(2) .steps__picto { animation: ccm-flotte 3.9s 1.5s ease-in-out infinite alternate; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(3) .steps__picto { animation: ccm-flotte 3.1s 1.3s ease-in-out infinite alternate; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(4) .steps__picto { animation: ccm-flotte 4.2s 1.6s ease-in-out infinite alternate; }
html.js-anim .steps[data-reveal-group].is-in li:nth-child(5) .steps__picto { animation: ccm-flotte 3.6s 1.4s ease-in-out infinite alternate; }

/* --- Les pictogrammes secondaires : une respiration, rien de plus -------- */
/*
 * Les cinq medaillons d etapes flottent depuis la vague 4 ; les vingt-neuf
 * autres ne bougeaient pas du tout. Releve du 02/09/2026 sur les six pages :
 * 34 pictogrammes, 5 animes.
 *
 * Ils recoivent la MEME langue - un flottement, pas un effet de plus - mais
 * en plus DISCRET, et pour deux raisons mesurees : ils font 38 a 58 px contre
 * 74 pour les medaillons, et ils sont alignes par quatre, cinq ou six. Une
 * amplitude franche sur six pictogrammes cote a cote ferait une vague ; trois
 * pixels, plus lentement, font une respiration.
 *
 * Les durees sont premieres entre elles et les retards tous differents : deux
 * voisins ne repassent jamais en phase, et l alignement ne se met jamais a
 * battre la mesure.
 */
@keyframes ccm-respire {
  /* SIX pixels et une legere bascule, pas trois. La premiere version, a 3 px
     droits, etait trop discrete pour se voir : « trop subtile ». L amplitude
     double et le pictogramme s incline d un degre et demi - c est la bascule
     qui rend le mouvement lisible, plus encore que la course, parce que l oeil
     lit un changement d ANGLE la ou trois pixels de hauteur se confondent avec
     la ligne de base. On reste loin du medaillon d etape, qui monte de 5 px
     sur une piece deux fois plus grande. */
  from { transform: translateY(0) rotate(-1.5deg); }
  to   { transform: translateY(-6px) rotate(1.5deg); }
}

/* « js-anim » seulement : une page sans script reste immobile, comme le reste
   des revelations. */
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li :is(.picto, .ico) {
  animation: ccm-respire 4.8s ease-in-out infinite alternate;
}

html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:nth-child(1) :is(.picto, .ico) { animation-duration: 4.3s; animation-delay: .20s; }
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:nth-child(2) :is(.picto, .ico) { animation-duration: 5.1s; animation-delay: .55s; }
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:nth-child(3) :is(.picto, .ico) { animation-duration: 4.7s; animation-delay: .35s; }
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:nth-child(4) :is(.picto, .ico) { animation-duration: 5.5s; animation-delay: .70s; }
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:nth-child(5) :is(.picto, .ico) { animation-duration: 4.1s; animation-delay: .45s; }
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:nth-child(6) :is(.picto, .ico) { animation-duration: 5.3s; animation-delay: .15s; }
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:nth-child(7) :is(.picto, .ico) { animation-duration: 4.9s; animation-delay: .60s; }
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:nth-child(8) :is(.picto, .ico) { animation-duration: 5.7s; animation-delay: .30s; }

/* Au survol de la ligne, le pictogramme se pose et grandit un peu : le
   mouvement s arrete la ou le regard s arrete. */
html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:hover :is(.picto, .ico) {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.08);
  transition: transform .4s cubic-bezier(.34, 1.4, .5, 1);
}

/* Qui demande moins de mouvement n en recoit aucun. */
@media (prefers-reduced-motion: reduce) {
  html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li :is(.picto, .ico),
  html.js-anim :is(.values, .boxes, .coordonnees, .inline-notes--pictos) li:hover :is(.picto, .ico) {
    animation: none;
    transform: none;
    transition: none;
  }
}

/* Au survol de la colonne, le medaillon se redresse et prend de la place. */
.steps li:hover .steps__picto {
  animation-play-state: paused;
  transform: translateY(-7px) scale(1.13) rotate(4deg);
  transition: transform .45s cubic-bezier(.34, 1.5, .5, 1);
}

/* Le bouton se remplit par la gauche.

   V3, point 16 : « le survol des boutons, l effet n est pas assez marque et
   pas assez fluide ». Le remplissage etait le SEUL effet visible - la regle
   « .button:hover { background-color } » ne se voit pas, le fond du bouton
   etant un degrade qui la recouvre. On ajoute donc ce que le remplissage seul
   ne donne pas : le bouton se souleve et porte une ombre, sur une duree plus
   courte que le remplissage pour que la reaction paraisse immediate.
   « transform » et « box-shadow » ne changent aucune boite de mise en page. */
.button {
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: transform .26s cubic-bezier(.22, .68, .3, 1),
              box-shadow .26s cubic-bezier(.22, .68, .3, 1);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(41, 37, 34, .24);
}

/* A l enfoncement, le bouton revient a sa place : sans cela il reste souleve
   sous le doigt et l appui ne se sent pas. */
.button:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(41, 37, 34, .2); }

.button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: translateX(-101%);
  content: '';
  background: var(--gold);
  transition: transform .45s cubic-bezier(.22, .68, .3, 1);
}

.button:hover::before { transform: none; }
.button--dark::before { background: #2c241c; }
.button--ghost::before { background: rgba(245, 241, 235, .12); }

/* La fleche des liens de domaine avance. */
.domains__link::after { display: inline-block; transition: transform .35s ease; }
.domains__link:hover::after { transform: translateX(6px); }

/* Les logos de partenaires restent EN COULEUR : la bande des partenaires de
   la maquette d accueil les dessine en couleur, et le brief ne dit rien de
   leur traitement - la maquette fait donc foi. Un passage en niveaux de gris
   aurait ete une reecriture de six identites qui ne nous appartiennent pas.
   Seul le survol ajoute quelque chose, et il n enleve rien. */
.partners img { transition: transform .45s ease, filter .45s ease; }

.partners li:hover img { transform: scale(1.06); filter: saturate(1.12); }

/* --- Matieres de fond ------------------------------------------------------ */

/* Un grain tres fin sur les bandes sombres : sans lui, un aplat de 600 px de
   haut se bande sur les ecrans 8 bits. Le motif est un SVG en data-uri, que
   l en-tete CSP autorise explicitement (img-src 'self' data:). */
/* overflow: hidden n est pas une precaution de style ici, c est le seul
   confinement de la decoration : le halo ci-dessous fait 900 px de large et,
   centre sur une fenetre de 640, il debordait de 128 px de chaque cote - donc
   la page entiere defilait lateralement. Trois tests l ont attrape. */
.section--dark,
.section--black,
.section--engagements { position: relative; overflow: hidden; }

.section--dark::after,
.section--black::after,
.section--engagements::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .5;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}

.section--dark > *,
.section--black > *,
.section--engagements > * { position: relative; z-index: 1; }

/* Halo dore, tres large et tres pale, derriere la bande des engagements : il
   donne au noir une profondeur que l aplat n a pas. */
.section--engagements::before {
  position: absolute;
  z-index: 0;
  top: -30%;
  left: 50%;
  width: 900px;
  height: 900px;
  max-width: 140vw;
  transform: translateX(-50%);
  content: '';
  background: radial-gradient(circle, rgba(183, 122, 66, .16) 0%, rgba(183, 122, 66, 0) 62%);
  pointer-events: none;
}

/* Point 8 : « supprimer le trait tout a gauche et tout a droite ». Les deux
   filets verticaux ajoutes le 30/08 sont retires. La bande garde sa place
   dans le flux, sans decor. */


/* --- Le degrade qui defile (points 2, 3 et 5) ------------------------------- */

@keyframes ccm-degrade { to { background-position: 200% 0; } }

/* --- Jauge de lecture ------------------------------------------------------ */

/* Un filet dore de 3 px en haut de la fenetre, qui dit ou l on en est dans la
   page. C est le seul element de cette feuille qui n existe sur aucune maquette
   et n a pas d equivalent papier : il ne recouvre rien, ne deplace rien, et se
   retire d un seul bloc si le client n en veut pas. */
.jauge {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold-button), var(--gold-light));
  pointer-events: none;
}

/* --- Une seule colonne : plus aucun filet vertical --------------------------

   Sous 640 px toutes ces bandes passent sur UNE colonne : un filet vertical n y
   separe plus rien, il pend. La regle est posee ICI, en fin de feuille, et non
   dans le bloc des 640 px : celui-ci precede le bloc des 900 px, qui RETABLIT
   le filet sur « .values--six li:nth-child(3n+1) » pour sa mise en page a deux
   colonnes. Meme specificite, donc c est le dernier ecrit qui peint - et il
   laissait un filet a gauche de « Patrimoine ». Mesure a 600 px avant
   correction : un seul element gardait un border-left, et c etait lui.        */

@media (max-width: 640px) {
  /* « :nth-child(n) » designe TOUS les enfants et ne change donc rien au choix
     des elements - il sert uniquement a porter la specificite a (0,2,1), celle
     de la regle a battre. Sans lui, « .values--six li » vaut (0,1,1) et perd,
     quelle que soit sa place dans la feuille. */
  .values li:nth-child(n),
  .values--six li:nth-child(n),
  .values--four li:nth-child(n),
  .boxes li:nth-child(n),
  .steps li:nth-child(n) { border-left: 0; }
}

/* --- Le repli sans mouvement ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-reveal],
  html.js-anim [data-reveal-group] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js-anim [data-reveal] .rule,
  html.js-anim [data-reveal] .hero__rule { transform: none; transition: none; }

  html.js-anim .hero--slider [data-slide][data-active],
  html.js-anim .slider__caption[data-active] { animation: none; }

  /* Les trois animations de la V2. Le degrade se fige sur sa premiere
     couleur au lieu de disparaitre : le tiret et les boutons gardent leur
     teinte, ils cessent seulement de glisser. */
  .button,
  .site-nav a[aria-current='page']::after,
  .site-header--bandeau .site-nav a[aria-current='page']::after {
    animation: none;
    background-position: 0 0;
  }

  /* Le tiret de la barre de themes porte le MEME degrade anime que le
     menu du haut : il doit se figer avec lui. Il avait ete oublie.
     Mesure : sous « reduce », son animation tournait encore. */
  .themes button,
  .themes button::after,
  .themes button[aria-pressed='true']::after {
    animation: none;
    background-position: 0 0;
    /* La transition aussi : sans elle, le tiret apparaissait encore en fondu
       sur un quart de seconde, mesure sous « reduce ». Le reste du site met
       ses transitions a zero ; celle-ci y echappait. */
    transition: none;
  }

  /* La FAQ : le depliage se fait d un coup, sans deroule ni rotation du
     chevron, et le survol ne fond plus la couleur. La question s ouvre
     toujours - « reduire les animations » n a jamais voulu dire « voir
     moins de contenu ». */
  .faq__item[open] .faq__reponse { animation: none; }
  .faq__question { transition: none; }
  .faq__chevron { transition: none; }

  /* Le ruban s arrete, et sa copie de defilement se cache : sans cela il
     montrerait DOUZE logos pour six. */
  .partners-ruban .partners { animation: none; }
  .partners-ruban .partners[aria-hidden='true'] { display: none; }
  .partners-ruban { justify-content: center; }

  /* « .domains article » ne designait rien - ces cartes sont des <li>. Le
     troisieme selecteur fossile du fichier, et le plus couteux : ici il ne
     rendait pas une regle inerte, il rendait inoperant le REFUS du mouvement.
     Qui demandait moins d animations recevait quand meme le soulevement,
     l ombre et le zoom de la photo. « .cards li » et « .projects li » partent
     avec eux : zero occurrence dans les pages livrees. */
  .domains li, .gallery__item,
  .domains li img, .gallery__item img,
  .steps li img, .partners img, .domains__link::after,
  .site-header, .site-header__inner { transition: none; }

  .domains li:hover, .domains li:hover:nth-child(n),
  .gallery__item:hover { transform: none; box-shadow: none; }

  .domains li:hover img, .gallery__item:hover img { transform: none; }

  /* Les pictogrammes d etape : ni entree, ni halo, ni flottement. */
  html.js-anim .steps[data-reveal-group] .steps__picto,
  html.js-anim .steps[data-reveal-group].is-in .steps__picto {
    transform: none;
    opacity: 1;
    transition: none;
    animation: none;
  }

  .steps li::before,
  html.js-anim .steps[data-reveal-group].is-in li::before { display: none; animation: none; }
  .steps li:hover .steps__picto { transform: none; transition: none; }

  .button::before { display: none; }
  /* Le soulevement du survol tombe aussi : un mouvement qu on ne peut pas
     refuser est une gene, pas une decoration. La couleur, elle, reste. */
  .button:hover, .button:focus-visible, .button:active {
    transform: none; box-shadow: none; transition: none;
  }
  .jauge { display: none; }
}


/* ========================= L ENTREE DANS L ATELIER =========================
 *
 * « Comme pour Humanova » : le MECANISME est releve sur l ecran d entree de
 * humanova-ia.com - une fois par visite, deux phases a 1800 et 2200 ms, sortie
 * en fondu avec un leger agrandissement, et on peut passer d un clic. Ce qui
 * change, c est l univers.
 *
 * LES CERNES DU BOIS. Humanova trace des circuits ; ici, la coupe d un tronc.
 * Cinq anneaux se dessinent du coeur vers l aubier, puis s ouvrent d un coup :
 * on traverse la planche. Ils sont ELLIPTIQUES et legerement inclines - un
 * tronc n est jamais un cercle parfait, et des cercles concentriques auraient
 * fait une cible, pas du bois.
 *
 * LE FOND EST CLAIR, et c est le logo qui l a decide : son encre est sombre,
 * et sur le fond noir essaye d abord, la moitie « MENUISERIE » disparaissait.
 * Le papier est de toute facon la tonalite dominante du site : on n arrive pas
 * dans un autre univers, on entre dans le sien.
 *
 * L ecran est construit par ccm-entree.js et n existe PAS dans le HTML livre :
 * sans JavaScript il ne peut pas se construire, donc il ne peut pas rester
 * baisse. Voir l en-tete de ce fichier-la.
 */
/* PAS d « overflow: hidden » pendant l entree : il retirait la barre de
   defilement, et son retour faisait sauter toute la page de 15 a 17 px au
   moment ou l ecran se levait (mesure le 03/09, apres le retour du client).
   Le defilement est refuse par ccm-entree.js, geste par geste, la barre ne
   bouge pas. */

/* LA BULLE DE DISCUSSION PASSE DEVANT TOUT. Elle se pose au plan 2 147 483 645,
   soit tout en haut de la pile : elle apparaissait donc PAR-DESSUS l ecran
   d entree, coin bas-droit, avant meme que le visiteur soit entre. On ne
   surenchérit pas sur son plan - c est une course perdue d avance - on la
   masque le temps de l entree. Meme remede que dans l editeur, ou elle
   recouvrait le panneau. */
html[data-entree] [id^='chatbase'] { display: none !important; }

.entree {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #fdfbf8 0%, #f2ebe1 52%, #e2d5c4 100%);
  cursor: pointer;
  transition: opacity .6s ease-in-out, transform .6s ease-in-out;
  will-change: opacity, transform;
}

.entree[data-phase='sortie'] { opacity: 0; transform: scale(1.04); }
.entree--partie { visibility: hidden; }

/* --- Les cernes ---------------------------------------------------------- */

.entree__cernes {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.entree__cerne {
  position: absolute;
  /* Le trait est plus franc qu au premier essai : a .22 sur un fond creme, les
     cernes se devinaient plus qu ils ne se voyaient. Un dessin trop discret ne
     dit rien du tout. */
  border: 1px solid rgba(160, 104, 55, .38);
  border-radius: 50%;
  opacity: 0;
  animation: ccm-cerne 2.4s cubic-bezier(.2, .75, .3, 1) both;
}

/* Largeur et hauteur differentes : c est ce leger ovale, avec l inclinaison,
   qui fait lire « bois » plutot que « cible ». */
.entree__cerne--1 { width: 190px;  height: 160px;  animation-delay: .05s; }
.entree__cerne--2 { width: 350px;  height: 292px;  animation-delay: .22s; }
.entree__cerne--3 { width: 520px;  height: 430px;  animation-delay: .40s; }
.entree__cerne--4 { width: 700px;  height: 574px;  animation-delay: .58s; }
.entree__cerne--5 { width: 900px;  height: 730px;  animation-delay: .76s; }

@keyframes ccm-cerne {
  0%   { transform: rotate(-8deg) scale(.55); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: .78; }
}

/* La phase « avance » : le bois s ouvre et on passe au travers. */
.entree[data-phase='avance'] .entree__cerne {
  animation: ccm-cerne-ouvre .6s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes ccm-cerne-ouvre {
  from { transform: rotate(-8deg) scale(1);   opacity: .78; }
  to   { transform: rotate(-8deg) scale(3.2); opacity: 0; }
}

/* --- La poussiere de bois ------------------------------------------------ */

.entree__poussiere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.entree__grain {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(143, 87, 41, .55);
  opacity: 0;
  animation: ccm-grain 7s linear infinite;
}

/* Douze grains, douze places, douze tempos : une poussiere reguliere n est
   plus de la poussiere. */
.entree__grain:nth-child(1)  { left: 12%; top: 78%; animation-duration: 6.2s; animation-delay: .0s; }
.entree__grain:nth-child(2)  { left: 23%; top: 88%; animation-duration: 7.4s; animation-delay: .7s; }
.entree__grain:nth-child(3)  { left: 34%; top: 72%; animation-duration: 5.8s; animation-delay: 1.3s; }
.entree__grain:nth-child(4)  { left: 45%; top: 92%; animation-duration: 8.1s; animation-delay: .4s; }
.entree__grain:nth-child(5)  { left: 56%; top: 80%; animation-duration: 6.7s; animation-delay: 1.8s; }
.entree__grain:nth-child(6)  { left: 67%; top: 86%; animation-duration: 7.9s; animation-delay: .2s; }
.entree__grain:nth-child(7)  { left: 78%; top: 74%; animation-duration: 6.4s; animation-delay: 1.1s; }
.entree__grain:nth-child(8)  { left: 88%; top: 90%; animation-duration: 7.1s; animation-delay: 2.2s; }
.entree__grain:nth-child(9)  { left: 18%; top: 62%; animation-duration: 8.6s; animation-delay: .9s; }
.entree__grain:nth-child(10) { left: 61%; top: 66%; animation-duration: 5.5s; animation-delay: 1.6s; }
.entree__grain:nth-child(11) { left: 39%; top: 58%; animation-duration: 7.7s; animation-delay: 2.5s; }
.entree__grain:nth-child(12) { left: 82%; top: 60%; animation-duration: 6.9s; animation-delay: .55s; }

@keyframes ccm-grain {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .5; }
  100% { transform: translateY(-260px) translateX(26px); opacity: 0; }
}

/* --- Le coeur : le logo du client ---------------------------------------- */

.entree__coeur {
  position: relative;
  z-index: 2;
  text-align: center;
}

.entree__logo {
  display: block;
  width: min(340px, 64vw);
  height: auto;
  margin: 0 auto;
  animation: ccm-entree-logo .85s cubic-bezier(.2, .8, .3, 1) .15s both;
}

@keyframes ccm-entree-logo {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.entree__mot {
  margin: 20px 0 0;
  color: rgba(63, 58, 54, .52);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  animation: ccm-entree-mot .8s ease .6s both;
}

@keyframes ccm-entree-mot {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.entree[data-phase='avance'] .entree__coeur {
  animation: ccm-entree-avance .55s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes ccm-entree-avance {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(1.16); opacity: 0; }
}

@media (max-width: 720px) {
  .entree__cerne--4,
  .entree__cerne--5 { display: none; }
}