/* =================================================================================================
   LA PAGE DE PRESENTATION DE LA RACINE (landing page), et elle seule.

   Elle succede a la page d'attente du 7 aout 2026 et s'appuie sur style.css, qui porte deja
   Figtree, les bruns de tokens.ts, le voile de mie du haut de page et la grammaire des cartes.
   Ce fichier n'ajoute que ce qui est propre a la presentation : le hero aux trois iPhones,
   les sections, et les ecrans d'application DESSINES en CSS sous le cadre PNG.

   LE CADRE IPHONE (assets/iphone-cadre.png) vient du fichier depose par Paul-Antoine le 8 aout
   2026, detoure par livrables/site n'ayant aucune construction : fond et ecran rendus
   transparents, ilot conserve, rogne, reduit a 860 px. La geometrie de l'ecran a ete MESUREE
   sur l'image detouree, pas estimee :
     gauche/droite 5,678 %  ·  haut 2,373 %  ·  bas 2,396 %  ·  rayon d'angle 10,79 % de la largeur.

   LES ECRANS DES TELEPHONES sont un systeme en « em » : .ecran fixe sa taille de police en cqw
   (unite de requete de conteneur, 1 % de la largeur du telephone), et tout l'interieur se mesure
   en em. Un seul nombre change, tout l'ecran suit, quelle que soit la taille du telephone.
   Le rayon 2.8em vaut exactement 10,78 % de la largeur (2.8 x 3.85). Les 16px juste avant le
   cqw sont le repli des navigateurs sans requetes de conteneur.

   LA POLITIQUE DE SECURITE du fichier _headers interdit style et script en ligne : tout est ici,
   et la page ne porte aucun JavaScript.
   ============================================================================================== */

/* -------------------------------------------------------------------------------------------------
   L'ossature de la page
   ---------------------------------------------------------------------------------------------- */
.tenue {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 76px 0 0; }

/* style.css reserve « h2 » aux intitules en capitales des cartes de la page de commande : les
   titres de section de cette page les redefinissent, en phrase et en gras. */
.titre-section {
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--titre);
  text-transform: none;
  margin: 0 0 14px;
  text-wrap: balance;
}

.section-avant {
  font-size: 17px;
  line-height: 1.55;
  color: var(--corps);
  max-width: 620px;
  margin: 0 0 32px;
}

/* L'intitule en capitales des cartes, a l'echelle de la page (les ecrans des telephones ont le
   leur, en em). Meme dessin que le « h2 » de la page de commande. */
.etiquette {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--discret);
  font-weight: 600;
  margin: 0 0 6px;
}

/* Icones filaires, dessinees dans la page comme la loupe de la page de commande : img-src est
   ferme a ce qui vient du site, et une image pour vingt lignes de SVG serait le mauvais echange. */
.ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* -------------------------------------------------------------------------------------------------
   Les boutons. Le degrade brun est gradients.btnPrimary de tokens.ts, comme le bouton d'envoi de
   la page de commande ; le clair est son second role, bordure porteuse de sens sur fond blanc.
   ---------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hauteur-champ);
  padding: 0 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform var(--duree-courte) ease-out,
    background-color var(--duree-courte) ease-out;
}
.btn:active { transform: scale(0.97); } /* metrics.pressScale */

.btn-brun {
  background: linear-gradient(90deg, #5C3A1C, #2B1A0C);
  color: var(--mie);
}
@media (hover: hover) {
  .btn-brun:hover { background: linear-gradient(90deg, #432A14, #1D1108); }
}

/* Les boutons de telechargement, demande du 8 aout 2026 : la grammaire du design system et non
   les badges noirs officiels des magasins. Degrade du bouton principal, rayon des cartes, glyphe
   monochrome dessine dans la page (img-src est ferme). Les liens portent « # » tant que les
   fiches n'existent pas ; leur remplacement fait partie des gestes du lancement, dits dans
   docs/site-README.md, hors de ce dossier parce que ce dossier est servi publiquement. */
.btn-magasin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 22px;
  border-radius: 14px;
  background: linear-gradient(90deg, #5C3A1C, #2B1A0C);
  color: var(--mie);
  text-decoration: none;
  transition: transform var(--duree-courte) ease-out,
    background-color var(--duree-courte) ease-out;
}
.btn-magasin:active { transform: scale(0.97); } /* metrics.pressScale */
.magasin-ic { width: 24px; height: 24px; fill: currentColor; flex: none; }
.magasin-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
/* La petite ligne est la mie assombrie d'un ton, jamais un gris : texte secondaire teinte. */
.magasin-texte span { font-size: 11px; font-weight: 500; color: #EBD9B8; letter-spacing: 0.2px; }
.magasin-texte strong { font-size: 17px; font-weight: 700; }

/* Sur la carte sombre finale, les memes boutons passent en mie. */
.magasin-mie { background: var(--mie); color: var(--titre); }
.magasin-mie .magasin-texte span { color: var(--corps); }
.rang-magasins {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (hover: hover) {
  .btn-magasin:hover { background: linear-gradient(90deg, #432A14, #1D1108); }
  .magasin-mie:hover { background: #FFFFFF; }
}

/* style.css ne pose le halo de focus que sur input et button : les liens de cette page ont le leur. */
a:focus-visible {
  outline: 2px solid var(--croute);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: 14px; }

/* -------------------------------------------------------------------------------------------------
   L'en-tete. Pose sur le voile de mie, sans fond ni ombre : il ne flotte pas, il n'est pas collant.
   ---------------------------------------------------------------------------------------------- */
.entete { padding: 18px 0 0; }
/* space-between et non une marge automatique sur les ancres : quand elles disparaissent sur
   telephone, c'est le bouton qui doit tenir la droite, pas rester colle au logo. */
/* LE RANG SE REPLIE A TOUTES LES LARGEURS, ET CE N'EST PAS UN REGLAGE MAIS UNE GARANTIE
   (22 aout 2026). Ce fichier avait deja cet argument ecrit plus bas, pour la requete de media a
   420 px : « avec flex-wrap, aucun libelle, aucune police et aucune langue ne peut plus faire
   deborder cet entete, quelle que soit la largeur ». Il etait juste, il n'etait simplement pas
   applique partout.

   CE QUI DEBORDAIT, MESURE ET NON DEDUIT (Edge sans interface, sept largeurs, contre un serveur
   local). La bande fautive allait de 701 a 872 px de largeur utile : en dessous de 701 les trois
   ancres disparaissent (requete de media plus bas), au-dessus de 872 tout tient. Dedans, le rang
   reclamait 873 px et n'en avait pas autant, donc il debordait A DROITE, sans repli possible : le
   logo, les deux boutons sont en flex: none et les ancres n'ont aucun retrecissement. Chiffres
   releves : a 715 px de large, scrollWidth 873 pour clientWidth 715, soit 158 px hors de l'ecran ;
   a 755 px, 118 ; a 855 px, 18. C'est « Telecharger » qui sortait, ce que la capture de
   Paul-Antoine montrait exactement.

   POURQUOI LE REPLI PLUTOT QUE DE DEPLACER LE POINT DE RUPTURE DES ANCRES. Un point de rupture est
   un nombre juste pour un jeu de libelles et une taille de police donnes : il redeviendrait faux au
   premier mot allonge, ou chez un visiteur qui grossit les caracteres de son navigateur. Le repli,
   lui, ne peut pas se tromper. row-gap plus petit que column-gap pour que les deux rangs, quand ils
   apparaissent, se lisent comme un seul bloc et non comme deux barres. */
.rang-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
}
.logo { display: block; flex: none; }
.logo img { display: block; width: 126px; height: 45px; }

.nav-ancres {
  display: flex;
  gap: 24px;
}
.nav-ancres a {
  color: var(--corps);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
@media (hover: hover) {
  .nav-ancres a:hover {
    color: var(--titre);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
.btn-entete {
  height: 42px;
  padding: 0 17px;
  font-size: 15px;
  border-radius: 999px;
  flex: none;
}

/* LE LIEN DES COMMANDES PROFESSIONNELLES (22 aout 2026). Il porte la CANNELLE, et c'est le seul
   accent de cette page : la charte du 24 juillet 2026 la reserve exactement a cet usage. Le motif
   est ecrit a cote du lien dans index.html et il vaut d'etre relu avant d'y toucher : ce lien et
   « Telecharger » ne sont pas deux forces de la meme action, ce sont DEUX PORTES POUR DEUX
   PERSONNES, le client d'un boulanger et le boulanger. Les separer par la teinte plutot que par le
   poids est ce qui empeche l'un de se lire comme la version faible de l'autre.
   IL EST PASSE DE LA PASTILLE DOUCE A L'APLAT DE CANNELLE LE 27 AOUT 2026, demande de
   Paul-Antoine, pour porter le meme bouton que la landing V2. CE QUE CA CHANGE AU RAISONNEMENT
   CI-DESSUS, et il faut le lire avant d'y revenir : l'ancienne forme etait un fond --accent-doux
   (#F9E4CC) cerne d'un filet --accent-aplat (#A85B14), et le filet n'y etait PAS decoratif, le
   fond seul ne valant que 1,24:1 sur le blanc de l'entete, donc incapable de porter le reperage.
   LE FOND EST DESORMAIS L'APLAT LUI-MEME, qui vaut 5,03:1 avec du blanc, mesure de tokens.ts :
   il porte le reperage tout seul, et le filet n'a plus d'objet. Le contraste du texte est celui
   de l'aplat, 5,03:1, au-dessus du plancher AA de 4,5:1. Ne pas eclaircir le fond ni le texte
   sans refaire ce calcul.
   LA FORME EST UNE PASTILLE PLEINE et non un rectangle a 12 px, comme sur la V2. « Telecharger »
   la prend aussi, sans quoi les deux boutons de l'entete auraient deux rayons differents cote a
   cote, ce qui se lit comme un defaut et non comme une distinction. */
.btn-pro {
  background: var(--accent-aplat);
  color: #FFFFFF;
  font-weight: 600;
}
@media (hover: hover) {
  .btn-pro:hover { background: var(--accent-texte); }
}

/* LA REGLE .btn-magasin-inerte A ETE RETIREE LE 29 AOUT 2026, notemie 1.4.0 etant en production sur
   Google Play. Elle grisait le badge du second magasin tant que sa fiche n'etait pas publique, en
   lui retirant tout ce qui promet un clic. Ses deux <span> sont redevenus des <a>, donc plus aucun
   element ne la portait : elle est supprimee plutot que gardee « au cas ou », regle du depot sur le
   code que ses propres changements rendent inutile. Elle se retrouve dans l'historique git au
   commit du 22 aout 2026 si la question revenait. */

/* UN SEUL LIBELLE, JAMAIS DEUX, ET C'EST UNE REPRISE APRES ESSAI. Un premier jet ecrivait
   « Commandes professionnelles » et « Commandes pro » dans la page, l'un cache par une requete de
   media : sur un navigateur qui servait encore l'ancienne feuille, LES DEUX SE SONT AFFICHES COLLES
   l'un a l'autre. Un libelle qui n'existe qu'a demi est un libelle de trop, et il rend le defaut
   invisible a qui n'a pas exactement le bon cache. Le nom du lien est desormais entier a toutes les
   largeurs.
   CE QUI CEDE LA PLACE SOUS 600 px N'EST DONC PAS LE MOT MAIS L'AUTRE BOUTON : « Telecharger »
   quitte l'entete et le lien des professionnels y reste seul, motif complet a cote du lien dans
   index.html. Mesure a 390 px, la largeur du telephone le plus etroit vise : logo 126 + deux
   gouttieres de 20 + le lien a 14 px tiennent sans deborder. */
@media (max-width: 600px) {
  .btn-entete.btn-brun { display: none; }
  .btn-pro { padding: 0 14px; font-size: 14px; }
}

/* SOUS 420 px, L'ENTETE PASSE A DEUX RANGS, ET C'EST UNE GARANTIE ET NON UN REGLAGE. Le libelle
   entier plus le logo ne tiennent pas sur un rang a cette largeur, et je ne peux pas le VERIFIER
   par une capture : Edge sans interface a une fenetre plancher d'environ 489 px et fabrique un faux
   debordement en dessous, piege deja paye dans ce depot. Plutot que de regler une taille au jugé
   contre une mesure que je sais fausse, le rang se REPLIE : avec flex-wrap, aucun libelle, aucune
   police et aucune langue ne peut plus faire deborder cet entete, quelle que soit la largeur.
   Effet heureux et voulu : sur le telephone le plus etroit, le lien des professionnels devient une
   cible pleine largeur, c'est-a-dire ce qu'on veut pour la personne qui vient deposer une commande
   depuis un telephone. */
@media (max-width: 420px) {
  .rang-entete { flex-wrap: wrap; row-gap: 12px; }
  .btn-pro { flex: 1 0 100%; }
}

/* -------------------------------------------------------------------------------------------------
   Le premier ecran
   ---------------------------------------------------------------------------------------------- */
.hero {
  padding: 54px 0 0;
  text-align: center;
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--titre);
  margin: 0 auto 18px;
  /* min() et non 16em seul : a 34px de police, 16em font 544px, plus large que l'ecran d'un
     telephone, et un titre centre qui deborde emporte toute la page avec lui. */
  max-width: min(16em, 100%);
  text-wrap: balance;
}
.hero-sous {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--corps);
  max-width: 640px;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--discret);
}

/* -------------------------------------------------------------------------------------------------
   LA SCENE : trois telephones, trois points forts, le lien professionnel au centre et devant.

   LES ECRANS SONT ENTIERS DEPUIS LE 27 AOUT 2026, demande de Paul-Antoine. Ils etaient rognes par
   une hauteur de rangee fixe, 596 px sur ordinateur, ce qui coupait la barre d'onglets et les deux
   boutons Accepter et Refuser : c'etait defendable quand les ecrans etaient DESSINES et qu'on
   choisissait ce qu'ils montraient, ca ne l'est plus depuis qu'ils sont de vraies captures.
   LA HAUTEUR EST DONC `auto` ET NON UN NOMBRE. Une valeur fixe redeviendrait fausse au premier
   changement de `--tel` ou de capture, et elle le redeviendrait EN SILENCE, en rognant. `auto`
   suit le plus grand des trois d'elle-meme. Le `padding-bottom` n'est pas de la marge : c'est la
   place de l'ombre portee : elle descend a 76 px sous l'appareil (30 de decalage, 46 de flou) et
   `.scene` la rognerait net sans ces 64.
   Sur telephone, la rangee coulisse d'un point fort a l'autre (defilement aimante, sans script).
   ---------------------------------------------------------------------------------------------- */
.scene { overflow: hidden; margin-top: 46px; }
.rang-scene {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 24px 64px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rang-scene::-webkit-scrollbar { display: none; }

.mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  margin: 0;
  scroll-snap-align: center;
  --pose: translateY(0);
  transform: var(--pose);
}

/* Le point fort, en chapeau de son telephone. Celui du centre porte l'accent : c'est le plus gros. */
.mobile-mot {
  display: inline-flex;
  margin: 0 auto 12px;
  background: #FFFFFF;
  border: 1px solid var(--trait-carte);
  color: var(--corps);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 4;
  white-space: nowrap;
}
.mot-fort {
  background: var(--accent-doux);
  border-color: #EED2B3;
  color: var(--accent-texte);
}

/* Le telephone flotte au-dessus de la page : ombre, jamais de bordure (l'elevation se declare une
   fois). L'ombre est teintee brown-950, comme toutes celles du design system. */
.telephone {
  position: relative;
  width: var(--tel, min(74vw, 320px));
  aspect-ratio: 2131 / 4298;
  container-type: inline-size;
  filter: drop-shadow(0 30px 46px rgba(43, 26, 12, 0.18));
}
.telephone .cadre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* L'ecran dessine, glisse SOUS le cadre : l'ilot du PNG passe donc devant, comme sur un vrai.
   Geometrie mesuree, en-tete de fichier. Le degrade est le voile de mie de l'application
   (gradients.screen), aux proportions de ses 52/122/166 px sur une largeur d'ecran. */
.ecran {
  position: absolute;
  left: 5.678%;
  right: 5.678%;
  top: 2.373%;
  bottom: 2.396%;
  z-index: 1;
  overflow: hidden;
  border-radius: 2.8em;
  font-size: 16px;
  font-size: 3.85cqw;
  background-color: #FFFFFF;
  background-image: linear-gradient(to bottom, #F6E7CD 0, #FBF3E4 3em, #FEFCF8 7.2em, #FFFFFF 9.7em);
  background-repeat: no-repeat;
  padding: 0 1.05em;
  color: var(--corps);
  line-height: 1.35;
}

/* L'ECRAN N'EST PLUS DESSINE, C'EST UNE CAPTURE DE LA FICHE DE STORE (26 aout 2026).
   Les trois ecrans etaient redessines en HTML : c'etait la seule facon d'en avoir un net sans
   image, mais il fallait les reecrire a chaque evolution du produit, et le dessin a fini par
   mentir. Les captures viennent de `livrables/marketing/sources/`, celles-la memes que les deux
   fiches de store, donc ce que la page montre est exactement ce qu'un visiteur telechargera.

   LA GEOMETRIE, ET ELLE TOMBE JUSTE. Les captures font 1080x2198 : c'est l'ecran d'un appareil de
   1080x2340 moins sa barre d'etat (105 px en haut) et sa barre gestuelle (37 px en bas). Placees
   sous la barre d'etat redessinee, elles occupent 93,91 % de la hauteur de l'ecran du cadre, et
   les 1,60 % qui restent en bas sont le blanc de la barre d'onglets, qui continue de lui-meme.

   LA TEINTE DU HAUT EST MESUREE, pas choisie : #F7EBD5 est la moyenne de la premiere ligne des
   trois fichiers. Sans ce raccord, la couture entre la barre dessinee et l'image se verrait. */
.ecran-vue {
  padding: 0;
  background-color: #FFFFFF;
  background-image: linear-gradient(to bottom, var(--haut, #F8EAD6) 0 4.487%, #FFFFFF 4.487%);
}
/* La capture des commandes professionnelles a ete refaite le 27 aout 2026 et son haut n'est pas
   tout a fait celui des deux autres : #F5E5CA contre #F8EAD6, treize valeurs d'ecart dans le bleu,
   ce qui se voit sur une couture franche. La teinte est donc portee par appareil et MESUREE sur la
   premiere ligne de chaque fichier, jamais reconduite d'une capture a l'autre. */
.mobile-centre .ecran-vue { --haut: #F5E5CA; }
.ecran-vue .m-statut {
  position: absolute;
  inset: 0 0 auto;
  height: 4.487%;
  padding: 0 1.4em 0 1.5em;
  font-size: 0.9em;
}
.ecran-vue > img {
  position: absolute;
  top: 4.487%;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* La rangee d'etat, de part et d'autre de l'ilot. */
.m-statut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95em 0.4em 0 0.9em;
  color: var(--titre);
  font-weight: 700;
  font-size: 0.95em;
}
.m-statut-ic { width: 3em; height: 0.8em; fill: var(--titre); flex: none; }
.m-pile-cadre { fill: none; stroke: var(--titre); stroke-width: 1; opacity: 0.5; }

/* CE QUI RESTE DE LA GRAMMAIRE D'ECRAN, apres que les trois telephones sont passes aux captures
   le 26 aout 2026. Trois classes servent encore, et plus dans un telephone : .m-coche et .m-fait
   pour les cases du recapitulatif de la carte « Au labo » et du flux des commandes pro, .m-badge
   pour la pastille « 42 en Cci » de la vignette du mail groupe.

   LES AUTRES SONT MORTES, ET ELLES L'ETAIENT DEJA AVANT CE CHANGEMENT : .m-marque, .m-h1,
   .m-sous, .m-boite, .m-vide, .m-barre, .m-decompte et .m-envoyer ne sont employees nulle part
   dans index.html ni dans 404.html, et ne l'etaient pas davantage le 25 aout. Elles sont
   SIGNALEES et non supprimees : elles ne viennent pas de ce chantier. */
.m-marque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin-top: 0.9em;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--croute);
  font-size: 0.95em;
}
.m-marque img { width: 1.35em; height: 1.35em; display: block; }

.m-h1 {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--titre);
  margin-top: 0.55em;
}
.m-sous { color: var(--discret); font-size: 0.82em; margin-top: 0.15em; }

/* Chaque ligne porte son trait au-dessus, regle reprise de la page de commande ; la toute premiere
   d'une carte sans intitule n'en a pas besoin, elle collerait au bord. */

.m-boite {
  width: 2.5em;
  text-align: center;
  border: 1px solid var(--trait-fort);
  border-radius: 0.6em;
  padding: 0.3em 0;
  font-weight: 700;
  color: var(--titre);
  background: #FFFFFF;
  flex: none;
}
.m-vide { color: var(--discret); font-weight: 400; }

/* La case du fournil : la convention de Levain, cochee en orange. Sert aussi, en pleine taille,
   dans les vignettes de la page (le systeme em la suit partout). */
.m-coche {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  background: #FFFFFF;
  position: relative;
}
.m-fait { background: var(--accent-aplat); border-color: var(--accent-aplat); }
.m-fait::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.9em;
  font-weight: 700;
}

.m-badge {
  background: var(--accent-doux);
  color: var(--accent-texte);
  font-size: 0.7em;
  font-weight: 700;
  padding: 0.25em 0.6em;
  border-radius: 0.6em;
  white-space: nowrap;
  flex: none;
}

/* La barre d'envoi de la page de commande, en miniature : elle flotte, donc ombre et pas de trait. */
.m-barre {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.85em;
  background: #FFFFFF;
  border-radius: 1.1em;
  padding: 0.6em 0.75em;
  box-shadow: 0 0.5em 1.6em rgba(43, 26, 12, 0.14);
}
.m-decompte { flex: 1; min-width: 0; font-size: 0.72em; color: var(--discret); }
.m-decompte strong { display: block; font-size: 1.05em; color: var(--titre); }
.m-envoyer {
  background: linear-gradient(90deg, #5C3A1C, #2B1A0C);
  color: var(--mie);
  font-weight: 700;
  font-size: 0.82em;
  padding: 0.65em 0.9em;
  border-radius: 0.8em;
  white-space: nowrap;
  flex: none;
}

/* L'entree en scene : la seule animation de la page. Les telephones se levent une fois, depuis un
   etat presque en place, et se posent (sortie exponentielle, jamais de rebond). var(--pose) porte
   l'inclinaison de repos de chacun, l'animation la conserve. prefers-reduced-motion est coupe
   globalement par style.css. */
@keyframes lever {
  from { opacity: 0; transform: var(--pose) translateY(26px); }
  to { opacity: 1; transform: var(--pose); }
}
.mobile { animation: lever 750ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.mobile-centre { animation-delay: 80ms; }
.mobile-fournil { animation-delay: 220ms; }
.mobile-vente { animation-delay: 320ms; }

/* La rangee coulissante recoit le clavier : elle defile, il faut pouvoir y entrer sans souris. */
.rang-scene:focus-visible {
  outline: 2px solid var(--croute);
  outline-offset: -2px;
  border-radius: 12px;
}

/* Au-dela du telephone : la rangee ne coulisse plus, elle se compose. Le centre devant, les cotes
   en retrait, plus bas et a peine inclines, rognes par le bord de la scene. 881 px et non 761 :
   la composition fait 874 px de large, et entre les deux (un iPad en portrait) la scene rognait
   les capsules laterales en plein mot, releve par la revue de finition. */
@media (min-width: 881px) {
  .rang-scene {
    justify-content: center;
    gap: 0;
    height: auto;
    overflow: visible;
    padding: 0 0 64px;
  }
  .scene { overflow: hidden; }
  .mobile { scroll-snap-align: none; }
  .mobile-centre { order: 2; z-index: 3; --tel: 358px; }
  .mobile-fournil { order: 1; z-index: 1; margin-right: -44px; --tel: 302px; --pose: translateY(48px) rotate(-2.4deg); }
  .mobile-vente { order: 3; z-index: 1; margin-left: -44px; --tel: 302px; --pose: translateY(48px) rotate(2.4deg); }
}

/* -------------------------------------------------------------------------------------------------
   Le point fort n°1 : la bande du lien professionnel, sur fond creux pour changer de respiration.
   ---------------------------------------------------------------------------------------------- */
.bande {
  background: var(--creux);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  padding: 76px 0;
  margin-top: 0;
}
.rang-lien {
  display: grid;
  grid-template-columns: 1.05fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.lien-texte p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--corps);
  margin: 0 0 14px;
  max-width: 54ch;
}
.lien-texte p strong { color: var(--titre); }
.lien-appui { color: var(--discret); font-size: 15px; }

/* Le parcours d'une demande, en trois temps relies par des fleches : le lien, la demande recue,
   la commande acceptee. Cartes posees : bordure, pas d'ombre. */
.flux {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}
.flux-carte {
  background: #FFFFFF;
  border: 1px solid var(--trait-carte);
  border-radius: 16px;
  padding: 16px 18px;
}
.flux-fleche {
  display: flex;
  justify-content: center;
  padding: 6px 0;
  color: var(--discret);
}
.flux-ligne {
  padding: 8px 0;
  border-top: 1px solid var(--trait);
  font-weight: 600;
  font-size: 15px;
  color: var(--titre);
}
.flux-carte .etiquette + .flux-ligne { border-top: 0; padding-top: 4px; }
.flux-quand { color: var(--corps); font-weight: 400; }
.flux-boutons { display: flex; gap: 10px; margin-top: 12px; }
.flux-accepter,
.flux-refuser {
  flex: 1;
  text-align: center;
  border-radius: 12px;
  padding: 10px 0;
  font-weight: 700;
  font-size: 15px;
}
.flux-accepter { background: linear-gradient(90deg, #5C3A1C, #2B1A0C); color: var(--mie); }
.flux-refuser { border: 1px solid var(--trait-fort); color: var(--corps); font-weight: 600; }
.flux-fin { display: flex; align-items: center; gap: 12px; }
.flux-fin-texte { font-size: 14px; color: var(--discret); min-width: 0; }
.flux-fin-texte strong { display: block; font-size: 15px; color: var(--titre); }

/* -------------------------------------------------------------------------------------------------
   Le quotidien : une grille asymetrique, le fournil en grand avec sa vignette, les autres autour.
   ---------------------------------------------------------------------------------------------- */
.grille-quotidien {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-areas:
    "fournil comptoir listing"
    "fournil livraison boutiques";
  gap: 16px;
}
.grille-quotidien > .q-carte:nth-child(1) { grid-area: fournil; }
.grille-quotidien > .q-carte:nth-child(2) { grid-area: comptoir; }
.grille-quotidien > .q-carte:nth-child(3) { grid-area: listing; }
.grille-quotidien > .q-carte:nth-child(4) { grid-area: livraison; }
.grille-quotidien > .q-carte:nth-child(5) { grid-area: boutiques; }

.q-carte { margin: 0; padding: 24px; }
.q-carte h3 {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--titre);
  margin: 2px 0 8px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.q-carte p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--corps); }

.v-recap { margin: 16px 0 2px; }
.v-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--trait);
  font-size: 15px;
}
.v-nom { flex: 1; min-width: 0; font-weight: 600; color: var(--titre); }
.v-qte { font-weight: 700; color: var(--titre); }
.q-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--discret);
}
.q-carte .q-note { font-size: 14px; line-height: 1.5; }
.q-note .ic { width: 16px; height: 16px; margin-top: 2px; }

/* -------------------------------------------------------------------------------------------------
   Ce qui fait la difference : trois cartes, chacune ouverte par sa vignette en creux.
   ---------------------------------------------------------------------------------------------- */
.grille-difference {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.d-carte { margin: 0; padding: 24px; }
.d-carte h3 {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--titre);
  margin: 16px 0 8px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.d-carte p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--corps); }

.v-vignette {
  background: var(--creux);
  border-radius: 12px;
  padding: 16px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.v-mail-ligne { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; }
.v-mail-mot { color: var(--discret); flex: none; width: 46px; }
.v-mail-val { font-weight: 600; color: var(--titre); min-width: 0; }
.v-mail-objet { font-weight: 700; }

.v-releve-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--corps);
}
.v-releve-ligne:first-child { color: var(--discret); font-size: 13px; padding-bottom: 6px; }
.v-releve-val { font-weight: 600; color: var(--titre); }
.v-releve-reste { border-top: 1px solid var(--trait); margin-top: 4px; padding-top: 8px; }
.v-releve-reste .v-releve-val { font-weight: 800; }

.v-allergene-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  color: var(--titre);
  padding: 2px 0 10px;
  font-size: 15px;
}
.v-info {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--trait-fort);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--corps);
  flex: none;
}
.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chip {
  background: var(--accent-doux);
  color: var(--accent-texte);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
}

/* -------------------------------------------------------------------------------------------------
   La fin : une seule carte sombre, le degrade du bouton principal a l'echelle de la page.
   ---------------------------------------------------------------------------------------------- */
.section-final { padding-top: 76px; }
.final {
  background: linear-gradient(135deg, #5C3A1C, #2B1A0C);
  border-radius: 24px;
  padding: 64px 32px;
  text-align: center;
}
/* La tuile creme du logo, seul rappel du monde sur la seule surface sombre de la page. */
.final-sceau { display: block; margin: 0 auto 16px; }
.final h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mie);
  text-transform: none;
  margin: 0 0 12px;
  text-wrap: balance;
}
.final p {
  color: #EBD9B8; /* la mie assombrie d'un ton : texte secondaire teinte, jamais gris */
  font-size: 16px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 26px;
}
/* PIEGE DE SPECIFICITE, ET IL MORDAIT DEJA : `.final p` pese (0,1,1) et ecrase toute regle de
   marge ecrite en (0,1,0) sur une de ces trois lignes. C'est pour cela que les trois sont
   prefixees `.final` : sans ce prefixe, `margin-bottom: 2px` etait lu, calcule, puis jete, et le
   prix se detachait de sa ligne « mise en service » de 26 px au lieu de 2. La ligne de contact en
   souffrait deja avant cette injection, son `margin: 22px 0 0` n'a jamais eu d'effet. */
.final .final-prix { margin-bottom: 2px; }
.final-prix strong { color: var(--mie); font-weight: 700; }
/* La cannelle de la V2 ne tient pas sur le brun 950 (3,77:1, sous le plancher). Sur cette carte,
   c'est la mie qui accentue : la ligne la plus claire EST la ligne accentuee. */
.final .final-service { color: var(--mie); font-weight: 700; margin-bottom: 30px; }
.final-contact { font-size: 15px; }
.final .final-contact { margin: 20px 0 0; }
.final-contact a { color: var(--mie); font-weight: 700; }

/* -------------------------------------------------------------------------------------------------
   Le pied de page
   ---------------------------------------------------------------------------------------------- */
.pied { margin-top: 64px; border-top: 1px solid var(--trait); }
/* « flex-wrap » ajoute le 8 aout 2026 avec les trois liens legaux : le pied porte desormais six
   elements et non trois, et sans le repli il poussait la page de cote sur un telephone. La regle
   « margin-left: auto » de .pied-droits continue de rejeter la mention de droits a droite tant que
   tout tient sur une ligne, et la laisse passer a la ligne suivante en dessous. */
.rang-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 22px 24px;
  font-size: 14px;
  color: var(--discret);
}
.pied-marque {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--croute);
  font-size: 15px;
}
.pied-marque img { display: block; }
.rang-pied a { color: var(--accent-texte); text-decoration: none; }
@media (hover: hover) {
  .rang-pied a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.pied-droits { margin-left: auto; }

/* -------------------------------------------------------------------------------------------------
   Les tailles d'ecran
   ---------------------------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .grille-quotidien {
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas:
      "fournil comptoir"
      "fournil listing"
      "livraison boutiques";
  }
}

@media (max-width: 900px) {
  .rang-lien { grid-template-columns: 1fr; gap: 36px; }
  .flux { max-width: 440px; margin: 0; }
}

@media (max-width: 700px) {
  .nav-ancres { display: none; }
  .tenue { padding: 0 20px; }
  .section { padding-top: 56px; }
  .bande { padding: 56px 0; }
  .section-final { padding-top: 56px; }
  .grille-quotidien {
    grid-template-columns: 1fr;
    grid-template-areas: "fournil" "comptoir" "listing" "livraison" "boutiques";
  }
  .final { padding: 48px 24px; }
  .pied { margin-top: 48px; }
  .rang-pied { flex-wrap: wrap; gap: 12px 20px; padding: 22px 20px; }
}

/* Le defilement doux des ancres, seulement pour qui accepte le mouvement (le tueur d'animations de
   style.css ne couvre pas scroll-behavior). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}