/* ============================================================================
   IMMERSIF — la couche qui fait le premier regard (25/09/2026, le soir).
   Le dirigeant, devant un site fraîchement créé : « je ne trouve toujours pas que le site soit exceptionnel… je veux vraiment un
   site moderne quand je fais une création, sinon ce n'est pas possible de continuer ; je dois avoir un vrai effet woah ».
   Première passe : photo plein écran, bandeau, présentation qui s'allume. Relue le soir même par un directeur artistique à froid,
   sur treize créations : « propre, pas woah — rien n'appartient au commerçant (son nom fait 18 px), le voile noircit tout, des
   étiquettes “Photo d'illustration” partout, le verre dépoli fait IA, le bandeau répète la liste, la page finit en impasse ».
   D'où cette version :
     1. le NOM en géant, calé sur la largeur sans script (--lettres × --chasse de la police), posé sur la photo ; le titre saisi
        devient la promesse au-dessus ; métier — commune en surtitre ; la photo S'OUVRE autour d'eux à l'arrivée ;
     2. un voile seulement sous le texte (plus dense sur photo claire), un grain et un étalonnage communs à toutes les photos ;
     3. l'en-tête posé sur la photo, puis un bandeau OPAQUE (pas de verre dépoli : c'est la marque « trop IA » du dirigeant) ;
     4. un bandeau à la couleur de la photo, qui porte son nom et son métier ; un sceau « métier · commune » qui tourne ;
     5. les offres en grand ; la présentation qui s'allume sur fond sombre ; une galerie éditoriale (grande, verticale, plein
        cadre) qui se dévoile au défilement ; l'appel final sur la couleur de la photo ; le nom plein cadre dans le pied.
   Règles tenues : le nom, l'adresse et les boutons ne BOUGENT jamais (seules leurs couleurs suivent l'en-tête) ; tout mouvement
   s'éteint sous « mouvement réduit » ; sans « animation-timeline » (Firefox), chaque animation liée au défilement tombe à son état
   final — la page est simplement immobile, jamais à moitié affichée. Aucun script : l'export reste sans script.
   « scroll(nearest) », jamais « scroll(root) » : au téléphone c'est .page-site qui défile (la barre d'appel reste en bas).
   Préfixe P = html[data-immersif][data-editorial].theme-boutique[data-composition] : une spécificité au-dessus des signatures.
   ============================================================================ */

html[data-immersif][data-editorial].theme-boutique[data-composition]{--im-ease:cubic-bezier(.2,.7,.15,1);--im-ouvre:cubic-bezier(.76,0,.24,1);
  --im-nuit:#0c0b0a;--im-clair:#fff;--chasse:.52;--nom-max:210px;
  --grain: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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* La chasse moyenne d'une lettre, par police de métier : ce qui cale le nom sur la largeur. */
html[data-immersif][data-editorial].theme-boutique[data-composition=plombier]{--chasse:.74;--nom-max:190px}
html[data-immersif][data-editorial].theme-boutique[data-composition=photographe]{--chasse:.64}
html[data-immersif][data-editorial].theme-boutique[data-composition=commun]{--chasse:.58}
html[data-immersif][data-editorial].theme-boutique[data-composition=cafe]{--chasse:.54}
html[data-immersif][data-editorial].theme-boutique:is([data-composition=hebergement],[data-composition=conseil],[data-composition=courtier],[data-composition=coiffure]){--chasse:.48}

/* ---------------------------------------------------------------- L'en-tête : opaque quand il n'est pas sur la photo */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-tete{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--fond)}

/* ---------------------------------------------------------------- 1. L'ouverture plein écran (avec photo) */
/* Plafonnée : une capture « page entière » agrandit la fenêtre à toute la hauteur de la page — une ouverture en 100svh grandissait
   avec elle, jusqu'à faire planter Chromium (verifier_directions, 25/09). */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo){min-height:max(600px,min(100svh,1100px));padding:calc(var(--haut-tete) + clamp(48px,8vw,120px)) var(--marge) clamp(36px,4.6vw,72px);
  background:var(--im-nuit);color:var(--im-clair);align-items:end;isolation:isolate}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;margin:0;aspect-ratio:auto;grid-column:auto;grid-row:auto;border-radius:0;overflow:hidden;box-shadow:none;transform:none;clip-path:inset(0)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-image picture{display:block;width:100%;height:100%}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-image img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;aspect-ratio:auto;border-radius:0}
/* Un étalonnage commun : les photos de banque ont l'air faites pour ce site. */
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.entree-image,.galerie-piste,.preuve) img{filter:contrast(1.05) saturate(1.08)}
/* Le voile, SOUS le texte seulement, et le grain. */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--grain),linear-gradient(0deg,#0c0b0ab3 0%,#0c0b0a66 34%,#0c0b0a00 62%),linear-gradient(180deg,#0c0b0a4d 0%,#0c0b0a00 130px);
  background-size:256px 256px,auto,auto}
/* Photo claire (direction._image : clarté du bas-gauche > 0,5) : le voile se densifie là où se pose le nom. */
html[data-immersif][data-photo-claire][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo)::after{
  background:var(--grain),linear-gradient(0deg,#0c0b0ad9 0%,#0c0b0a99 36%,#0c0b0a26 64%,#0c0b0a00 78%),linear-gradient(180deg,#0c0b0a66 0%,#0c0b0a00 150px);
  background-size:256px 256px,auto,auto}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-texte{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;gap:24px}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .essentiel{grid-column:1/-1;max-width:none}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .coordonnees{grid-column:1/-1;justify-self:start;align-self:end;text-align:left}
/* LA COIFFURE AU BUREAU (feu vert du 28/09, O7 ; déjà relevé le 27/09) : sa signature (signatures.css) éclate .essentiel en
   display:contents et pose .coordonnees en lignes 3 à 5 pour sa mise en page « magazine » à trois colonnes. Sur la photo plein
   écran, la couche immersive remettait .coordonnees sur toute la largeur SANS lui rendre une ligne : la phrase (.sous, ligne 3)
   et l'adresse occupaient la même case, l'une écrite sur l'autre. Ici, l'essentiel redevient un bloc et les coordonnées suivent. */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .essentiel{display:block}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .coordonnees{grid-row:auto}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) :is(.surtitre,.localisation,.entree-horaires,.ouvert-maintenant,.lien-rappel,.annonce,.nom-geant){color:var(--im-clair)}
/* Le surtitre : métier — commune. La commune seule en bas à droite faisait doublon : elle est ici. */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .surtitre{margin:0 0 18px}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .surtitre{color:#ffffffd9}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .surtitre::before{background:currentColor}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .localisation[data-champ=ville]{display:none}
/* La promesse (le titre saisi), au-dessus du nom. */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .accroche{margin:0 0 14px;max-width:32ch;padding:0;font:var(--display-graisse) clamp(22px,2.3vw,34px)/1.18 var(--display);letter-spacing:-.01em;white-space:pre-wrap;text-wrap:balance;color:inherit}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .accroche{color:#fffffff0;text-shadow:0 1px 24px #0c0b0a59}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .accroche-fin{font-style:italic;color:inherit}
/* LE NOM : plein cadre, sur une ligne s'il est court, deux lignes équilibrées sinon. Il ne bouge jamais. */
html[data-immersif][data-editorial].theme-boutique[data-composition] .nom-geant{margin:0;max-width:none;padding:.16em 0 0;
  font-family:var(--display);font-weight:var(--display-graisse);font-style:normal;text-transform:none;text-align:left;
  font-size:clamp(46px,calc((100vw - 2 * var(--marge)) / (var(--lettres) * var(--chasse))),var(--nom-max));
  line-height:.88;letter-spacing:-.03em;text-wrap:balance;hyphens:manual;overflow-wrap:normal;color:var(--encre)}
html[data-immersif][data-editorial].theme-boutique[data-composition=plombier] .nom-geant{letter-spacing:-.01em}
/* Sur un écran de portable (1440 × 900 et moins haut), le nom sur deux lignes poussait le bouton principal — « Appeler »,
   « Réserver une table », « Demander un devis » — sous la ligne de flottaison chez quatre exemples sur neuf (audit design du
   27/09, point 14). Une ligne du nom ne dépasse pas 15 % de la hauteur de la fenêtre : l'ouverture tient dans l'écran. */
@media (min-width:900px) and (max-height:960px){
  html[data-immersif][data-editorial].theme-boutique[data-composition] .nom-geant{font-size:clamp(46px,min(calc((100vw - 2 * var(--marge)) / (var(--lettres) * var(--chasse))),15vh),var(--nom-max))}
}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .nom-geant{text-shadow:0 2px 40px #0c0b0a40}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .sous{margin:12px 0 0;max-width:44ch;font:400 clamp(16px,1.2vw,19px)/1.55 "Archivo",sans-serif}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .sous{color:#ffffffd9}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-horaires{border-color:#ffffff80}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .btn{border-color:#ffffffb3;color:var(--im-clair)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .btn--plein{background:var(--im-clair);border-color:var(--im-clair);color:#141312}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--sur)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .manque-court{color:var(--im-clair);border-color:#ffffff80}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .illustration-legende{position:absolute;right:var(--marge);top:calc(var(--haut-tete) + 14px);bottom:auto;left:auto;z-index:2;margin:0;padding:4px 8px;background:#0c0b0a99;color:#fff;font:400 11.5px/1.3 "Archivo",sans-serif;text-align:right}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .illustration-legende a{color:inherit}
/* Les tarifs de déplacement du plombier, posés sur la photo : en clair. */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .fiche-tarifs{grid-column:1/-1;color:#fff;border-color:#ffffff4d;background:transparent}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .fiche-tarifs :is(p,dt,dd){color:#fff}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .fiche-tarifs :is(div,dl){border-color:#ffffff40}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .faits{display:none}
/* Le sceau : métier · commune en rond, à cheval sur l'ouverture et le bandeau. Décor, hors lecture. */
.sceau{display:none}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .sceau{display:block;position:absolute;z-index:3;top:auto;left:auto;right:var(--marge);bottom:clamp(36px,4.6vw,72px);width:clamp(96px,8.4vw,124px);height:auto;overflow:visible;pointer-events:none}
html[data-immersif][data-editorial].theme-boutique[data-composition] .sceau text{font:600 7.4px/1 var(--mono);letter-spacing:.14em;fill:#fff}
html[data-immersif][data-editorial].theme-boutique[data-composition] .sceau circle{fill:#fff}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo .sceau text,
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo .sceau circle{fill:var(--encre)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree{overflow:visible}

/* ---------------------------------------------------------------- 1 bis. L'ouverture sans photo : une affiche */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo{max-width:none;min-height:min(820px,86svh);align-items:end;isolation:isolate;background:var(--fond2);display:grid;grid-template-columns:1fr;padding-bottom:clamp(48px,6vw,96px);overflow:clip}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo .entree-texte{display:flex;flex-direction:column;gap:24px}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo::before{content:attr(data-initiale);position:absolute;z-index:-1;right:-.04em;top:50%;translate:0 -50%;
  font:var(--display-graisse) clamp(320px,52vw,860px)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--encre) 16%,transparent);pointer-events:none}

/* ---------------------------------------------------------------- 4. Le bandeau : son nom, à la couleur de sa photo */
html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-mots{position:relative;z-index:2;overflow:hidden;margin:0;border:0;background:var(--accent);color:var(--sur)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-piste{display:flex;width:max-content}
html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-mots ul{display:flex;margin:0;padding:clamp(20px,2.4vw,34px) 0;list-style:none}
html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-mots li{display:inline-flex;align-items:center;gap:.5em;padding:0 0 0 .5em;white-space:nowrap;
  font:var(--display-graisse) clamp(38px,5.6vw,96px)/1 var(--display);letter-spacing:-.02em;color:var(--sur);-webkit-text-stroke:0}
html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-mots li:nth-child(even){font-style:italic}
html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-mots li::after{content:"✦";font-size:.36em;font-style:normal;opacity:.6;color:currentColor}

/* ---------------------------------------------------------------- 5. Les offres en grand */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-main>.editorial-section>h2::before,
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-main>.editorial-section>.section-tete h2::before{content:none}
html[data-immersif][data-editorial].theme-boutique[data-composition] .liste-offres li{position:relative;isolation:isolate;padding-block:clamp(22px,2.4vw,34px)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .liste-offres h3{font-size:clamp(28px,3.4vw,54px);line-height:1.02;letter-spacing:-.02em}
html[data-immersif][data-editorial].theme-boutique[data-composition] .liste-offres p{font-size:17px;line-height:1.5;margin-top:10px}
html[data-immersif][data-editorial].theme-boutique[data-composition] .liste-offres li::before{font:500 13px/1.9 var(--mono);color:var(--accent);opacity:1}
html[data-immersif][data-editorial].theme-boutique[data-composition] .liste-offres li::after{content:"";position:absolute;inset:0 calc(-1 * var(--marge));z-index:-1;background:color-mix(in srgb,var(--accent) 9%,var(--fond));transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--im-ease)}
@media(hover:hover){html[data-immersif][data-editorial].theme-boutique[data-composition] .liste-offres li:hover::after{transform:scaleY(1)}}

/* ---------------------------------------------------------------- 5 bis. La présentation qui s'allume, sur fond sombre */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-main>.maison{padding-block:clamp(104px,13vw,220px);background:var(--encre);color:var(--fond)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .maison h2{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--fond) 62%,transparent);margin-bottom:clamp(28px,3vw,44px)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .maison h2::before{content:none}
html[data-immersif][data-editorial].theme-boutique[data-composition] .maison .presentation{grid-column:1/-1;max-width:23ch;font:var(--display-graisse) clamp(34px,5vw,84px)/1.08 var(--display);letter-spacing:-.02em;text-wrap:pretty;color:var(--fond)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .maison blockquote{color:var(--fond);border-color:var(--accent)}

/* ---------------------------------------------------------------- 5 ter. La galerie éditoriale : une grande, une verticale, une plein cadre */
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-metier .galerie-piste,.preuve){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start;width:auto;transform:none;animation:none;overflow:visible;padding:0}
html[data-immersif][data-editorial].theme-boutique[data-composition] .galerie-metier .galerie-fenetre{overflow:visible;max-width:none;margin:0;padding:0;position:static;height:auto}
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure,
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(n){position:relative;margin:0;width:auto;height:auto;min-width:0;overflow:hidden;background:var(--fond2);transform:none;opacity:1;flex:none}
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(1){grid-column:1/span 8;aspect-ratio:4/3;margin-top:0}
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(2){grid-column:9/-1;aspect-ratio:3/4;margin-top:clamp(40px,7vw,110px)}
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(3){grid-column:1/-1;aspect-ratio:auto;height:min(78svh,820px);margin:clamp(16px,2vw,28px) calc(-1 * var(--marge)) 0}
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:only-child{grid-column:1/-1;aspect-ratio:auto;height:min(72svh,760px);margin:0 calc(-1 * var(--marge))}
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(1):nth-last-child(2){grid-column:1/span 7}
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(2):last-child{grid-column:8/-1}
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) picture,
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
html[data-immersif][data-editorial].theme-boutique[data-composition] .galerie-metier,html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-main>.preuve{padding-block:clamp(56px,7vw,110px);height:auto}
/* La photo plein cadre finit la galerie : la section suivante (souvent la présentation sombre) s'y colle, sans bande crème. */
html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-metier,.editorial-main>.preuve):has(figure:nth-child(3)){padding-bottom:0}

/* ---------------------------------------------------------------- 6. L'appel final, sur la couleur de sa photo */
/* L'accent ASSOMBRI (mêlé de noir) : un accent doré ou orangé laissait le texte courant à 3,7:1 (contrôle d'accessibilité, gîte). */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-main>.infos{--im-appel:color-mix(in srgb,var(--accent) 62%,#000);background:var(--im-appel);color:#fff;padding-block:clamp(88px,11vw,180px)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .infos :is(h2,h3,p,dt,dd,a:not(.btn)){color:inherit}
html[data-immersif][data-editorial].theme-boutique[data-composition] .infos h2{font-size:clamp(40px,6vw,104px);line-height:.98;letter-spacing:-.03em}
html[data-immersif][data-editorial].theme-boutique[data-composition] .infos .geste-fin .btn{min-height:0;padding:.42em .9em;border-radius:999px;font:var(--display-graisse) clamp(26px,3.6vw,56px)/1.05 var(--display);letter-spacing:-.02em;background:#fff;border-color:#fff;color:var(--im-appel);white-space:normal}
html[data-immersif][data-editorial].theme-boutique[data-composition] .infos .geste-fin .btn:hover{background:var(--fond);border-color:var(--fond);color:var(--encre)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .infos .grille-horaires>div{border-color:#ffffff38}
/* Le conseil écrit la dernière ligne de son titre final en italique à la couleur d'accent (signatures.css) : sur l'appel final,
   qui est cet accent assombri, elle faisait 1,88:1 — presque invisible (audit design du 27/09, point 9). L'italique reste, en clair. */
html[data-immersif][data-editorial].theme-boutique[data-composition=conseil] .infos h2 .ligne-titre:last-child{color:color-mix(in srgb,#fff 86%,var(--accent))}

/* ---------------------------------------------------------------- 7. Le pied : le nom, plein cadre, en clair */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-pied{overflow:hidden}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-pied .pied-enseigne{margin:0 0 clamp(28px,4vw,56px);color:var(--fond);opacity:1;line-height:.84;letter-spacing:-.03em;text-wrap:balance;
  font-size:clamp(46px,calc((100vw - 2 * var(--marge)) / (var(--lettres,12) * var(--chasse))),230px)}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-pied .pied-illustrations{flex-basis:100%;margin:0;font:400 12.5px/1.4 "Archivo",sans-serif;opacity:.7}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-main>.edition-note{margin:0;padding:24px var(--marge);border-top:1px solid var(--filet);border-bottom:0;background:var(--fond)}

/* ---------------------------------------------------------------- Le mouvement — tout, ici, s'éteint sous mouvement réduit */
@media (prefers-reduced-motion:no-preference){
  /* L'arrivée : la photo S'OUVRE autour du nom (du cadre au plein écran) et recule ; promesse et phrase suivent. Le nom ne bouge pas. */
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-image{animation:im-ouvre 1.35s var(--im-ouvre) both}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-image img{animation:im-recule 2.4s var(--im-ease) both}
  /* Le titre (h1) ne bouge pas non plus : c'est l'identité de la page (verifier_replis_composition). Seuls surtitre et phrase suivent. */
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree :is(.surtitre,.sous){animation:im-apparait 1s var(--im-ease) both;animation-delay:.75s}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .surtitre{animation-delay:.5s}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-piste{animation:im-defile 46s linear infinite}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-mots:hover .bandeau-piste{animation-play-state:paused}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo::before{animation:im-apparait 1.6s var(--im-ease) both}
}
@keyframes im-ouvre{from{clip-path:inset(13% 17% 13% 17% round 22px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes im-recule{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes im-apparait{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes im-defile{to{transform:translateX(-50%)}}

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    /* 3. L'en-tête sur la photo : transparent en haut, bandeau opaque après quelques centimètres. Il prend EXACTEMENT --haut-tete :
       la photo remonte de cette hauteur (au téléphone l'en-tête dépassait de 8 px, une bande claire restait au-dessus). */
    html[data-immersif][data-editorial].theme-boutique[data-composition]:has(.editorial-main>.editorial-entree:not(.sans-photo):first-child) .editorial-entree:not(.sans-photo){margin-top:calc(-1 * var(--haut-tete))}
    html[data-immersif][data-editorial].theme-boutique[data-composition]:has(.editorial-main>.editorial-entree:not(.sans-photo):first-child) .editorial-tete{height:var(--haut-tete);min-height:0;box-sizing:border-box;padding-block:0;animation:im-tete linear both;animation-timeline:scroll(nearest);animation-range:0 38svh}
    html[data-immersif][data-editorial].theme-boutique[data-composition]:has(.editorial-main>.editorial-entree:not(.sans-photo):first-child) .editorial-tete .geste-tete{animation:im-tete-geste linear both;animation-timeline:scroll(nearest);animation-range:0 38svh}
    /* La photo glisse plus lentement que la page ; le sceau tourne. */
    html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-image picture{animation:im-parallaxe linear both;animation-timeline:scroll(nearest);animation-range:0 100svh}
    html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .sceau{animation:im-tourne linear both;animation-timeline:scroll(nearest);animation-range:0 220svh}
    html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo::before{animation:im-lettre linear both;animation-timeline:scroll(nearest);animation-range:0 100svh}
    /* La présentation s'allume à la lecture — entièrement allumée quand elle est au milieu de l'écran. */
    /* Par un MASQUE, pas par un texte transparent découpé sur un dégradé : le texte garde sa vraie couleur (le contrôle de contraste
       lisait « transparent », et un lecteur en couleurs forcées aussi) ; seul son éclairage varie. */
    html[data-immersif][data-editorial].theme-boutique[data-composition] .maison .presentation{
      -webkit-mask-image:linear-gradient(180deg,#000 0 46%,#0000003d 54% 100%);mask-image:linear-gradient(180deg,#000 0 46%,#0000003d 54% 100%);
      -webkit-mask-size:100% 240%;mask-size:100% 240%;-webkit-mask-position:0 100%;mask-position:0 100%;
      animation:im-eclaire linear both;animation-timeline:view();animation-range:entry 15% cover 42%}
    /* Titres de section et offres entrent ; les photos se DÉVOILENT (le cadre s'ouvre de bas en haut, l'image recule). */
    html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.section-tete h2,.liste-offres li,.categorie li,.faq details,.etapes li){animation:im-entre linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure{animation:im-devoile linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure img{animation:im-recule-vue linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(3) img{animation:im-parallaxe-vue linear both;animation-timeline:view();animation-range:cover 0% cover 100%;inset:-10% 0;height:120%}
    html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-pied .pied-enseigne{animation:im-enseigne linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@keyframes im-tete{from{background:transparent;border-bottom-color:transparent;color:var(--im-clair)}to{background:var(--fond);border-bottom-color:var(--filet);color:var(--encre)}}
@keyframes im-tete-geste{from{background:var(--im-clair);color:#141312}to{background:var(--encre);color:var(--fond)}}
@keyframes im-parallaxe{to{transform:translateY(20%)}}
@keyframes im-tourne{to{transform:rotate(360deg)}}
@keyframes im-lettre{to{transform:translateY(18%) rotate(-4deg)}}
@keyframes im-eclaire{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes im-entre{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes im-devoile{from{clip-path:inset(14% 0 0 0);translate:0 5vh}to{clip-path:inset(0 0 0 0);translate:0 0}}
@keyframes im-recule-vue{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes im-parallaxe-vue{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
@keyframes im-enseigne{from{opacity:.25;transform:translateY(22%)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- Le téléphone */
@media(max-width:760px){
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo){display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-height:max(540px,min(100svh,1000px));padding:calc(var(--haut-tete) + 88px) 20px 56px}
  /* La barre d'appel du visiteur occupe le bas : l'ouverture s'arrête au-dessus, rien n'est coupé. */
  html[data-immersif][data-appel][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo){min-height:max(520px,min(calc(100svh - 64px - env(safe-area-inset-bottom,0px)),1000px))}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .entree-texte{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  /* Au téléphone l'ouverture est une colonne flex : « align-self:end », qui posait les coordonnées EN BAS de la grille du bureau,
     y devient « à droite » — le bloc adresse et le bouton étaient décalés d'une centaine de pixels chez le café, le gîte, le
     fleuriste et le restaurant (audit design du 27/09, point 23 ; la coiffure, dont la signature dit « stretch », était alignée). */
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .coordonnees{align-self:stretch;justify-self:auto}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo)::after{background:linear-gradient(0deg,#0c0b0ae6 0%,#0c0b0a99 38%,#0c0b0a1a 66%,#0c0b0a4d 100%)}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .nom-geant{font-size:clamp(44px,min(17vw,calc((100vw - 40px) / (var(--mot,var(--lettres)) * var(--chasse)))),92px);line-height:.92}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .accroche{font-size:21px;max-width:none}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .sous{font-size:16px;margin-top:16px}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo{min-height:auto;padding:88px 20px 64px}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree.sans-photo::before{font-size:92vw;right:-.1em;top:36%}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .sceau{display:none}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-mots li{font-size:38px}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .liste-offres h3{font-size:26px}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-main>.maison{padding:88px 20px}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .maison .presentation{font-size:clamp(28px,8.2vw,40px);max-width:none}
  html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(1),
  html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(2){grid-column:1/-1;aspect-ratio:4/5;margin-top:0}
  html[data-immersif][data-editorial].theme-boutique[data-composition] :is(.galerie-piste,.preuve) figure:nth-child(3){height:62svh;margin-inline:-20px}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-pied .pied-enseigne{font-size:clamp(40px,calc((100vw - 40px) / (var(--lettres,12) * var(--chasse))),120px)}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .infos .geste-fin .btn{font-size:24px}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree:not(.sans-photo) .illustration-legende{top:auto;bottom:10px;right:20px;font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-piste{animation:none}
  html[data-immersif][data-editorial].theme-boutique[data-composition] .bandeau-mots ul[aria-hidden]{display:none}
}
/* Les coordonnées sous le nom : alignées sur le texte (une marge héritée d'une composition les décalait). */
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .coordonnees{margin:0;padding:0;border:0}
html[data-immersif][data-editorial].theme-boutique[data-composition] .editorial-entree .coordonnees .edition-liens{margin:0}