/* ==========================================================
   L'Émotion des Mots — « Le Carnet »
   Charte extraite de la maquette du 12/08/2026, validée par
   la cliente le 21/08. Polices auto-hébergées : aucun appel
   externe, donc aucun bandeau cookies.
   ========================================================== */

/* Polices embarquées — autonomie totale du fichier (et conformité RGPD : aucun appel à Google Fonts) */
/* Les titres — « Young Serif » (OFL) depuis le 11/09/2026, en remplacement de Fraunces
   dont le F d'« officiant » et le D ondulaient (repère n° 4 de Fabrice, réunion du 31/08 :
   il faut que ça reste rond). Une seule graisse, sous-ensemble latin, WOFF (33 Ko). */
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/polices/young-serif.woff') format('woff')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/polices/newsreader-variable.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/polices/newsreader-variable-italique.woff2') format('woff2')}
/* La main de Cécile — « Caveat » (OFL) depuis le 11/09/2026, en remplacement de
   « Nothing You Could Do » dont le F d'« officiante », le D et d'autres lettres
   ondulaient (repère n° 4 de Fabrice, réunion du 31/08 : une police RONDE, c'est
   la contrainte de Cécile). Fichier fourni par Fabrice, sous-ensemble latin, WOFF
   (pas de WOFF2 faute d'encodeur Brotli ce jour-là — 93 Ko, cache un an). */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/polices/caveat-variable.woff') format('woff')}




/* ══════════════ LE CARNET — système ══════════════ */
:root{
  --papier:#F7F1E6;          /* lin */
  --papier-2:#F1E7D3;        /* sable */
  --papier-3:#FBF7EE;        /* ivoire des tirages */
  --kraft:#E5D6BA;
  --kraft-2:#D2BC93;
  --kraft-sombre:#463526;    /* footer */
  --encre:#3B2B1F;           /* brun profond — jamais de noir */
  --encre-2:#6E5843;
  --encre-pale:#98836B;
  --terracotta:#A9502A;
  --terracotta-2:#8F3F1F;
  --corail:#FF6F61;          /* grands gestes seulement — corail « flashy », orangé légèrement rosé (31/08) */
  --corail-encre:#D9483A;    /* corail lisible (3,8:1 sur le papier, comme l'ancien #C85A38) */
  --sauge:#7C8A6E;
  --sauge-encre:#55644C;
  --sauge-pale:#E9ECE0;
  --fil:#A9502A;
  --ombre:0 1px 2px rgba(59,43,31,.10),0 6px 18px -6px rgba(59,43,31,.18);
  --ombre-tirage:0 2px 3px rgba(59,43,31,.12),0 14px 28px -12px rgba(59,43,31,.30);
  --serif:"Young Serif",Georgia,serif;
  --texte:"Newsreader",Georgia,serif;
  --main:"Caveat",cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--texte);color:var(--encre);background:var(--papier);
  font-size:1.125rem;line-height:1.65;font-weight:350;
  overflow-x:hidden;
}
/* grain du papier, partout */
body::before{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .17 0 0 0 0 .12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:#E9C9A8;color:var(--encre)}
img{display:block;max-width:100%}
a{color:var(--terracotta-2)}
h1,h2,h3{font-family:var(--serif);font-weight:420;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.manuscrit{font-family:var(--main);font-weight:400;line-height:1.3;letter-spacing:.01em}

/* ══ étiquette petites capitales ══ */
.etiquette{
  font-family:var(--texte);font-size:.78rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--encre-2);
}

/* ══ boutons — coins irréguliers, jamais de pilule ══ */
.btn{
  display:inline-block;font-family:var(--texte);font-weight:500;
  font-size:1rem;letter-spacing:.04em;text-decoration:none;
  padding:.85rem 1.7rem;border-radius:8px 3px 9px 4px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  position:relative;
}
.btn:hover{transform:translateY(-2px) rotate(-.3deg)}
.btn:active{transform:translateY(0)}
.btn-plein{background:var(--terracotta);color:#FCF7ED;box-shadow:var(--ombre)}
.btn-plein:hover{background:var(--terracotta-2);box-shadow:0 4px 10px rgba(59,43,31,.22)}
.btn-trace{color:var(--encre);border:1.5px solid var(--encre-2);border-radius:4px 9px 3px 8px;background:transparent}
.btn-trace:hover{background:rgba(59,43,31,.05)}

/* lien-flèche manuscrite */
.lien-fleche{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  color:var(--terracotta-2);font-weight:500;font-size:1.05rem;
}
.lien-fleche svg{transition:transform .2s}
.lien-fleche:hover svg{transform:translateX(5px)}
.lien-fleche em{font-style:normal;border-bottom:1.5px solid rgba(169,80,42,.4)}

/* ══ NAVIGATION — la tranche du carnet ══ */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(247,241,230,.92);backdrop-filter:blur(6px);
  border-bottom:1px dashed rgba(110,88,67,.45);
  transition:box-shadow .25s;
}
header.nav.ombre{box-shadow:0 2px 18px -6px rgba(59,43,31,.25)}
.nav-in{
  max-width:1280px;margin:0 auto;padding:.65rem 1.4rem;
  display:flex;align-items:center;gap:1.6rem;
}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--encre);margin-right:auto}
.logo .sceau{width:132px;height:132px;flex:none}
.logo b{font-family:var(--serif);font-weight:520;font-size:1.18rem;letter-spacing:.01em;line-height:1.05;display:block;white-space:nowrap}
.logo span{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-2);margin-top:.18rem;white-space:nowrap}
nav.liens{display:flex;gap:1.05rem;align-items:center}
nav.liens a:not(.btn){
  font-size:.93rem;color:var(--encre);text-decoration:none;font-weight:400;white-space:nowrap;
  padding:.2rem 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'%3E%3Cpath d='M2 4.2C12 2.4 24 2.2 34 3.1c9 .8 17 .9 24-.6' fill='none' stroke='%23D9483A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom/0% 5px;
  transition:background-size .25s ease;
}
nav.liens a:not(.btn):hover,nav.liens a:not(.btn)[aria-current]{background-size:100% 5px}
.nav-cta{margin-left:.4rem;font-size:.9rem;padding:.6rem 1.15rem;white-space:nowrap}
.burger{display:none;background:none;border:none;cursor:pointer;padding:.4rem;margin-left:auto}
.burger svg{display:block}

/* menu mobile — le sommaire du carnet */
.sommaire{
  position:fixed;inset:0;z-index:950;background:var(--papier);
  padding:5.5rem 2rem 2rem;display:none;flex-direction:column;gap:.2rem;
}
.sommaire.ouvert{display:flex}
.sommaire .etiquette{margin-bottom:1.2rem}
.sommaire a{
  display:flex;align-items:baseline;gap:.8rem;text-decoration:none;color:var(--encre);
  font-family:var(--serif);font-size:1.35rem;padding:.55rem 0;
  border-bottom:1px dotted rgba(110,88,67,.4);
}
.sommaire a i{font-family:var(--texte);font-style:normal;font-size:.8rem;color:var(--corail-encre);letter-spacing:.1em}
.sommaire a u{margin-left:auto;text-decoration:none;flex:1;border-bottom:1px dotted rgba(110,88,67,.5);transform:translateY(-4px)}
.sommaire a span{font-family:var(--texte);font-size:.85rem;color:var(--encre-2)}
.sommaire .btn{margin-top:1.6rem;text-align:center}
.fermer{position:absolute;top:1.1rem;right:1.2rem;background:none;border:none;cursor:pointer;padding:.5rem}

/* ══ HERO — la couverture ══ */
/* ══ LE HERO — un seul tirage, posé entier (28/08/2026) ══
   Le diaporama est retiré (décision Fabrice) : LA photo — la 393,
   « de loin ma photo préférée » de l'article du blog, l'arche entière,
   Cécile au micro à gauche — est montrée ENTIÈRE, comme un grand tirage
   d'album posé sur le papier, coins collés. Le pavé de texte se loge
   DANS l'ouverture de l'arche et cache les mariés, sans jamais mordre
   le bois.
   ⚠️ POURQUOI PAS UN COVER PLEIN ÉCRAN : montrer l'arche entière sous
   la barre fixe demande ~870 px d'image + ~100 px de barre ; un écran
   16:9 n'en a que 810. C'est de la géométrie, pas un goût — un cover
   coupera TOUJOURS les pieds ou le haut de l'arche quelque part.
   Bornes du pavé, MESURÉES sur la photo (1600×1067) : ouverture entre
   les montants x 565→1115, pavé y 427→988 → en % du tirage :
   left 35.6 / top 40 / width 34 / height 52.6. Si la photo change, ces
   quatre nombres sont à remesurer.
   ⚠️ 10rem de padding haut : l'entête fixe mesure 152,8 px (sceau 132 +
   2×.65rem). Avec 7.8rem le tirage passait de 24 px SOUS elle. Les 13.4rem
   de la formule = 10rem + 2.8rem + un peu de jeu ; les deux vont ensemble.
   Les tailles de texte du pavé sont en cqw (1 cqw = 1 % de la largeur
   du tirage, container-type sur .hero-tirage) bornées en rem : le pavé
   suit le tirage sans jamais déborder de l'arche. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:10rem 1.5rem 2.8rem}
.hero-tirage{position:relative;margin:0;container-type:inline-size}
.hero-tirage>img{display:block;width:100%}
/* la page de carnet posée sur le tirage */
.hero-wrap{
  z-index:2;transform:rotate(-.4deg);
  filter:drop-shadow(0 3px 5px rgba(59,43,31,.22)) drop-shadow(0 26px 40px rgba(59,43,31,.32));
}
.hero-page{
  max-width:634px;text-align:center;
  background:rgba(251,247,238,.95);
  padding:2.15rem 2.3rem 1.75rem;
  clip-path:polygon(1.2% 2.8%,6% .8%,14% 1.9%,25% .5%,38% 1.6%,52% .4%,66% 1.8%,79% .7%,90% 2%,98.6% 1.2%,99.4% 12%,98.5% 26%,99.6% 41%,98.6% 57%,99.5% 72%,98.4% 86%,99.3% 97%,92% 98.8%,80% 97.9%,66% 99.4%,51% 98.2%,36% 99.5%,22% 98.3%,10% 99.2%,1% 98%,.6% 88%,1.7% 74%,.5% 58%,1.6% 43%,.6% 28%,1.5% 13%)
}
.hero-page .etiquette{color:var(--terracotta-2);margin-bottom:.85rem;font-size:.7rem;letter-spacing:.17em}
.hero-page h1{font-size:clamp(1.5rem,2.35vw,1.94rem);font-weight:440;line-height:1.17}
.hero-page h1 .trait{position:relative;white-space:nowrap}
.hero-page h1 .trait svg{position:absolute;left:-2%;right:-2%;width:104%;height:.42em;bottom:-.22em}
.hero-page h1 .trait svg path{fill:none;stroke:var(--corail);stroke-width:3.2;stroke-linecap:round}
.hero-sous{margin:.95rem auto 0;max-width:50ch;font-size:1rem;color:var(--encre-2);font-weight:380}
.hero-btns .btn{font-size:.94rem;padding:.72rem 1.35rem}
.hero-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.35rem}
.hero-confiance{margin-top:1.1rem;font-size:.85rem;color:var(--encre-2);display:flex;gap:.55rem;align-items:center;justify-content:center;flex-wrap:wrap}
.etoiles{color:var(--terracotta);letter-spacing:.12em;font-size:.95rem}
.hero-note{
  position:absolute;z-index:5;
  color:#FBF7EE;text-shadow:0 1px 8px rgba(59,43,31,.6);
  font-size:clamp(1.25rem,2vw,1.6rem);transform:rotate(-2.4deg);
}
.hero-note svg{display:block;margin:.2rem auto 0;width:34px}

/* Le tirage entier avec le pavé dans l'arche : seulement quand l'écran
   loge un tirage assez grand (pavé ≥ ~280 px). Sinon, bascule empilée. */
@media(min-width:900px) and (min-height:640px){
  .hero-tirage{
    width:min(calc((100svh - 13.4rem)*1.5), calc(100vw - 3rem), 1560px);
    aspect-ratio:3/2;
    box-shadow:var(--ombre-tirage);
  }
  .hero-tirage>img{height:100%;object-fit:cover}
  .hero-wrap{position:absolute;left:35.6%;top:40%;width:34%;height:52.6%}
  .hero-page{
    width:100%;height:100%;max-width:none;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
    padding:1.4cqw 1.7cqw 1.2cqw;
  }
  .hero-page .etiquette{font-size:clamp(.5rem,.68cqw,.7rem);letter-spacing:.13em;margin-bottom:.55rem}
  .hero-page h1{font-size:clamp(1rem,1.6cqw,1.65rem)}
  .hero-sous{font-size:clamp(.78rem,1.02cqw,.98rem);margin-top:.7rem;max-width:44ch}
  .hero-btns{margin-top:1cqw;gap:.55rem}
  .hero-btns .btn{font-size:clamp(.7rem,.92cqw,.9rem);padding:.5em 1.1em}
  .hero-confiance{margin-top:.8cqw;font-size:clamp(.66rem,.86cqw,.82rem)}
  .hero-note{right:2.2cqw;bottom:1.6cqw}
}

/* Bande photo en haut, page de carnet glissée dessous — le dessin validé
   du 26/08 sur téléphone, étendu à tout écran trop petit pour l'arche. */
@media(max-width:899.98px),(max-height:639.98px){
  /* ⚠️ TOUT EST EN FLUX NORMAL ICI — corrigé le 28/08 sur retour de Fabrice
     (capture iPhone). Le premier jet donnait au <figure> une hauteur fixe
     (46svh) et laissait le pavé DÉBORDER hors de cette boîte : la section
     .hero ne mesurait donc que la photo, et le chapitre I remontait SOUS
     le pavé. Règle à tenir : sur téléphone le pavé est un bloc de flux,
     jamais un débordement — c'est lui qui doit donner sa hauteur au hero.
     La photo porte son ratio elle-même (aspect-ratio sur l'IMG, pas sur le
     figure) : en 3/2 pleine largeur elle est montrée ENTIÈRE, arche
     complète, cadrage exact — comme sur grand écran, sans rognage.
     Ni svh ni container-type sur ce chemin : rien qui dépende du calcul
     de hauteur de la barre d'adresse ni d'un conteneur de requête. */
  .hero{display:block;min-height:0;padding:9.6rem 0 2.6rem}
  .hero-tirage{container-type:normal;height:auto;box-shadow:none}
  .hero-tirage>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
  .hero-tirage .coin{display:none}
  .hero-wrap{position:relative;z-index:6;margin:-1.4rem .9rem 0;display:block}
  .hero-page{max-width:min(634px,100%);margin:0 auto;padding:2.2rem 1.4rem 1.9rem}
  .hero-note{display:none}
}

/* ══ structure de page / chapitres ══ */
main{position:relative}
.chap{position:relative;padding:5.5rem 1.4rem}
.chap-in{max-width:1180px;margin:0 auto;position:relative}
.chap-tete{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem}
.chap-num{
  font-family:var(--serif);font-size:1.05rem;color:var(--corail-encre);
  width:44px;height:44px;flex:none;display:grid;place-items:center;position:relative;
}
.chap-num svg{position:absolute;inset:0;width:100%;height:100%}
.chap-num svg ellipse{fill:none;stroke:var(--corail-encre);stroke-width:1.6;opacity:.85}
h2.chap-titre{font-size:clamp(1.85rem,3.4vw,2.7rem);margin-bottom:1rem}
.marge{border-left:2px solid rgba(217,72,58,.38);padding-left:1.6rem}

/* tirages photo */
.tirage{
  background:var(--papier-3);padding:12px 12px 14px;box-shadow:var(--ombre-tirage);
  position:relative;display:block;
}
.tirage img{width:100%;height:auto}
.tirage figcaption{
  font-family:var(--main);font-size:1.05rem;color:var(--encre-2);
  text-align:center;padding-top:.7rem;
}
.coin{position:absolute;width:26px;height:26px;background:linear-gradient(135deg,#D8C49E,#C8B084);opacity:.92;box-shadow:0 1px 2px rgba(59,43,31,.25)}
.coin.a{top:-7px;left:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
.coin.b{top:-7px;right:-7px;clip-path:polygon(0 0,100% 0,100% 100%)}
.coin.c{bottom:-7px;left:-7px;clip-path:polygon(0 0,0 100%,100% 100%)}
.coin.d{bottom:-7px;right:-7px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.scotch{
  position:absolute;top:-12px;left:50%;width:110px;height:30px;
  transform:translateX(-50%) rotate(var(--scotch-angle,-2deg));
  background:var(--scotch-ruban,rgba(213,190,146,.55));box-shadow:0 1px 2px rgba(59,43,31,.12);
  clip-path:polygon(2% 8%,98% 0,100% 92%,0 100%);
}

/* ══ LES RUBANS ADHÉSIFS — panachés sur tout le site (22/09/2026, repère 111) ══
   Les tirages sont collés comme dans un album : le ruban prend les couleurs de la charte,
   jamais d'autres. Couleur et inclinaison suivent la position du tirage dans sa rangée, si
   bien que deux rubans voisins ne sont jamais identiques — et qu'un tirage ajouté demain
   prend sa couleur tout seul, sans rien écrire dans le bloc.
   Le cycle vaut cinq pour que la bande de cinq tirages de l'accueil les porte toutes. */
:nth-child(5n+1) > .scotch{ --scotch-ruban:rgba(169,80,42,.32);   --scotch-angle:-3.2deg }
:nth-child(5n+2) > .scotch{ --scotch-ruban:rgba(124,138,110,.38); --scotch-angle:2.4deg }
:nth-child(5n+3) > .scotch{ --scotch-ruban:rgba(255,111,97,.30);  --scotch-angle:-1.4deg }
:nth-child(5n+4) > .scotch{ --scotch-ruban:rgba(213,190,146,.62); --scotch-angle:1.8deg }
:nth-child(5n)   > .scotch{ --scotch-ruban:rgba(124,138,110,.28); --scotch-angle:-2.6deg }

/* ══ CONTACT — les trois voies pour me joindre ══
   22/09/2026, repères 53 et 62 : la cliente demandait des pictogrammes ; la charte du Carnet
   les exclut (règle 9). Contre-proposition acceptée par elle : trois colonnes, intitulés
   de sa main. Le corail ne porte jamais de texte : le trait seul est en --corail. */
.joindre{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;margin:1.8rem 0 1.6rem;max-width:940px}
.joindre-voie{display:flex;flex-direction:column;gap:.25rem;padding-left:1.1rem;border-left:2px solid var(--corail)}
.joindre-voie .manuscrit{font-size:1.45rem;line-height:1.1;color:var(--corail-encre)}
.joindre-voie a{font-size:1.05rem;overflow-wrap:anywhere}
.joindre-voie em{font-style:normal;font-size:.9rem;color:var(--encre-pale)}
@media (max-width:860px){.joindre{grid-template-columns:1fr;gap:1.4rem}}

/* ══ COUPURES DE LIGNE — passe de vérification du 22/09/2026 ══
   La règle, une fois pour toutes : aucun mot seul sur la dernière ligne d'un titre
   ni d'un paragraphe, aucune césure automatique, et plus aucun <br> posé en dur dans
   une phrase manuscrite — le navigateur équilibre mieux et s'adapte à toutes les largeurs. */
h1, h2, h3, h4,
.chap-titre, .manuscrit, .etiquette, figcaption, blockquote, .btn, .lien-fleche em,
.avis-carte cite, .badge, .offre h3, .etape h3 { text-wrap: balance; }
p, li, dd, td, .marge p, .invitation-carte p { text-wrap: pretty; }
html { hyphens: manual; }

/* CHAPITRE I — la rencontre */
.rencontre{display:grid;grid-template-columns:minmax(300px,430px) 1fr;gap:4.5rem;align-items:center}
.rencontre .tirage{transform:rotate(-1.6deg);max-width:430px}
.rencontre-note{
  position:absolute;left:-1.2rem;top:-2.4rem;transform:rotate(-4deg);
  color:var(--corail-encre);font-size:1.35rem;z-index:3;
}
.rencontre-texte p{margin-bottom:1rem;max-width:70ch}
.rencontre-texte .grande{font-size:1.22rem}
.signature-inline{font-family:var(--main);font-size:1.5rem;color:var(--encre);margin:1.2rem 0 1.4rem}
.rencontre-liens{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem}

/* CHAPITRE II — la double page */
.fond-sable{background:var(--papier-2)}
.spread{
  display:grid;grid-template-columns:1fr 1fr;position:relative;
  background:var(--papier-3);box-shadow:var(--ombre-tirage);
  border-radius:3px;margin-top:2.6rem;
}
.spread::before{ /* la reliure */
  content:"";position:absolute;top:0;bottom:0;left:50%;width:64px;transform:translateX(-50%);z-index:2;
  background:linear-gradient(90deg,rgba(59,43,31,0) 0%,rgba(59,43,31,.09) 38%,rgba(59,43,31,.16) 50%,rgba(59,43,31,.09) 62%,rgba(59,43,31,0) 100%);
  pointer-events:none;
}
.spread::after{ /* couture centrale */
  content:"";position:absolute;top:14px;bottom:14px;left:50%;width:0;z-index:2;
  border-left:2px dashed rgba(110,88,67,.5);transform:translateX(-50%);pointer-events:none;
}
.page{padding:2.8rem 2.8rem 2.5rem;position:relative}
.page .badge{
  display:inline-block;font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:.34rem .8rem;border-radius:3px 7px 4px 8px;margin-bottom:1.15rem;
}
.badge-terre{background:#F3DECC;color:var(--terracotta-2)}
.badge-sauge{background:var(--sauge-pale);color:var(--sauge-encre)}
.page h3{font-size:1.72rem;margin-bottom:.75rem}
.page p{color:var(--encre-2);margin-bottom:1.3rem;max-width:70ch}
.page .tirage{margin:0 0 1.5rem;transform:rotate(1.1deg)}
.page:first-child .tirage{transform:rotate(-1.2deg)}
.page .tirage img{aspect-ratio:16/9.5;object-fit:cover}
.page-actions{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.page-actions .btn{font-size:.98rem}
.lien-discret{font-size:.98rem;color:var(--encre-2)}
.lien-discret b{font-weight:500;color:var(--terracotta-2)}
/* bandeau ressources sous la double page */
.ruban-ressources{
  margin-top:2.4rem;background:var(--kraft);border-radius:2px;
  padding:1.5rem 2rem;display:flex;gap:1.8rem;align-items:center;flex-wrap:wrap;
  box-shadow:var(--ombre);position:relative;transform:rotate(-.25deg);
}
.ruban-ressources .mini{width:120px;flex:none;transform:rotate(2deg);padding:6px 6px 8px}
.ruban-ressources p{flex:1;min-width:260px;font-size:1.05rem;color:var(--encre)}
.ruban-ressources p b{font-family:var(--serif);font-weight:520;display:block;font-size:1.18rem;margin-bottom:.15rem}
.ruban-ressources .liens{display:flex;gap:1.4rem;flex-wrap:wrap}

/* STRIP — toutes les histoires */
.histoires{padding:4.6rem 0 5rem;overflow:hidden}
.histoires .chap-in{max-width:1180px;padding:0 1.4rem}
.histoires-titre{text-align:center;margin-bottom:2.6rem}
.histoires-titre .manuscrit{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--encre)}
.histoires-titre p{color:var(--encre-2);margin-top:.5rem;font-size:1.02rem}
.table-photos{display:flex;gap:1.6rem;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.table-photos .tirage{width:190px;flex:none}
.table-photos .tirage img{aspect-ratio:1/1.05;object-fit:cover}
.table-photos .tirage:nth-child(1){transform:rotate(-2.5deg)}
.table-photos .tirage:nth-child(2){transform:rotate(1.8deg) translateY(14px)}
.table-photos .tirage:nth-child(3){transform:rotate(-1.2deg)}
.table-photos .tirage:nth-child(4){transform:rotate(2.4deg) translateY(10px)}
.table-photos .tirage:nth-child(5){transform:rotate(-1.8deg) translateY(4px)}
.table-photos figcaption{font-size:.98rem}

/* CHAPITRE III — pourquoi */
.pourquoi{display:grid;grid-template-columns:1.05fr 1fr;gap:4.5rem;align-items:center}
.pourquoi .tirage{transform:rotate(1deg)}
.pourquoi ul{list-style:none;margin:1.4rem 0 1.8rem}
.pourquoi li{
  padding:.62rem 0 .62rem 2.3rem;position:relative;color:var(--encre);
  border-bottom:1px dotted rgba(110,88,67,.35);font-size:1.08rem;
}
.pourquoi li:last-child{border-bottom:none}
.pourquoi li::before{
  content:"";position:absolute;left:.1rem;top:.95rem;width:22px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 10c4-1.5 8-2 12-2m-7-5c1.5 3.5 2.5 7 3 11' fill='none' stroke='%23D9483A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.pourquoi .confidence{font-family:var(--main);font-size:1.3rem;color:var(--corail-encre);transform:rotate(-1.2deg);display:inline-block;margin-bottom:.6rem}

/* CHAPITRE IV — le parcours, cousu au fil rouge */
.parcours{position:relative}
.parcours .intro{max-width:70ch;color:var(--encre-2);margin-bottom:3.4rem}
.frise{position:relative;max-width:900px;margin:0 auto}
.fil-svg{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;width:120px;pointer-events:none;z-index:1}
.fil-svg path{fill:none;stroke:var(--fil);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 9}
.etape{
  position:relative;z-index:2;width:calc(50% - 64px);padding:1.35rem 1.6rem 1.3rem;
  background:var(--papier-3);box-shadow:var(--ombre);margin-bottom:2.1rem;
  border-radius:2px 6px 3px 7px;
}
.frise>div.etape:nth-of-type(odd){margin-right:auto;transform:rotate(-.4deg)}
.frise>div.etape:nth-of-type(even){margin-left:auto;transform:rotate(.4deg)}
.etape .num{
  position:absolute;top:1.15rem;width:40px;height:40px;display:grid;place-items:center;
  font-family:var(--serif);font-size:1.02rem;color:var(--terracotta-2);
}
.frise>div.etape:nth-of-type(odd) .num{right:-84px}
.frise>div.etape:nth-of-type(even) .num{left:-84px}
.etape .num svg{position:absolute;inset:0}
.etape .num svg ellipse{fill:var(--papier);stroke:var(--terracotta);stroke-width:1.7}
.etape .num b{position:relative;font-weight:440}
.etape h3{font-size:1.28rem;margin-bottom:.3rem}
.etape p{font-size:1rem;color:var(--encre-2)}
.etape .manuscrit{display:block;color:var(--corail-encre);font-size:1.08rem;margin-top:.45rem}
.frise .tirage.pin{position:absolute;width:150px;z-index:3;padding:7px 7px 9px}
.frise .tirage.pin figcaption{font-size:.85rem;padding-top:.4rem}
/* Les trois polaroïds vivent dans les MARGES de la page, jamais sur les colonnes.
   Posés à left:24px / -26px / right:-14px, ils recouvraient les cartes de texte
   sur 160 px, titre compris — repère n° 2 du 26/08. */
.pin-1{top:22.5%;left:-182px;right:auto;transform:rotate(-2.6deg)}
.pin-2{top:47%;left:-182px;right:auto;transform:rotate(-3.4deg)}
.pin-3{bottom:4.5%;left:auto;right:-182px;transform:rotate(2.2deg)}
.parcours-cta{display:flex;gap:1.5rem;align-items:center;justify-content:center;margin-top:2.8rem;flex-wrap:wrap}

/* CHAPITRE V — leurs mots */
.avis-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:2.8rem}
.avis-carte{
  background:var(--papier-3);padding:2.1rem 1.8rem 1.7rem;position:relative;
  box-shadow:var(--ombre-tirage);
}
.avis-carte:nth-child(1){transform:rotate(-.9deg)}
.avis-carte:nth-child(2){transform:rotate(.7deg) translateY(10px)}
.avis-carte:nth-child(3){transform:rotate(-.5deg)}
.avis-carte .etoiles{display:block;margin-bottom:.75rem}
.avis-carte blockquote{font-style:italic;font-size:1.04rem;color:var(--encre);line-height:1.6}
.avis-carte cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.92rem;color:var(--encre-2)}
.avis-note{text-align:center;margin-top:2.2rem;font-size:.9rem;color:var(--encre-pale);font-style:italic}
.avis-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.avis-chiffre{display:flex;gap:.7rem;align-items:center;font-size:1.02rem;color:var(--encre-2)}
.avis-chiffre b{font-family:var(--serif);font-size:2.2rem;color:var(--encre);font-weight:480}
.avis-actions{display:flex;gap:1rem;justify-content:center;margin-top:2.6rem;flex-wrap:wrap}

/* INVITATION FINALE */
.invitation{position:relative;padding:7rem 1.4rem;overflow:hidden}
.invitation .photo{position:absolute;inset:0}
.invitation .photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.invitation .photo::after{content:"";position:absolute;inset:0;background:rgba(59,43,31,.55)}
.invitation-wrap{
  position:relative;z-index:2;max-width:640px;margin:0 auto;transform:rotate(.35deg);
  filter:drop-shadow(0 4px 8px rgba(30,20,12,.3)) drop-shadow(0 26px 44px rgba(30,20,12,.4));
}
.invitation-carte{
  text-align:center;
  background:rgba(251,247,238,.96);padding:3.2rem 2.6rem 2.8rem;
  clip-path:polygon(1.5% 2%,10% .6%,24% 1.8%,40% .5%,57% 1.7%,73% .6%,88% 1.9%,98.5% 1%,99.4% 14%,98.6% 30%,99.5% 47%,98.5% 64%,99.4% 80%,98.6% 97%,88% 98.7%,72% 98%,55% 99.4%,38% 98.4%,21% 99.3%,8% 98.2%,.7% 97.5%,1.6% 82%,.6% 65%,1.5% 48%,.6% 31%,1.4% 15%)
}
.invitation-carte .manuscrit{font-size:clamp(1.85rem,3.6vw,2.5rem);color:var(--encre)}
.invitation-carte p{margin:1.1rem 0 1.8rem;color:var(--encre-2)}
.invitation-carte .signature{margin-top:2rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.invitation-carte .signature .manuscrit{font-size:2rem;color:var(--terracotta-2);transform:rotate(-3deg)}
.invitation-carte .signature svg.boucle{width:74px;height:26px}
.invitation-carte .signature svg.boucle path{fill:none;stroke:var(--fil);stroke-width:2.2;stroke-dasharray:5 7;stroke-linecap:round}

/* FOOTER — le dos du carnet */
footer{background:var(--kraft-sombre);color:#EFE5D2;padding:4.5rem 1.4rem 2rem}
.foot-in{max-width:1180px;margin:0 auto}
.foot-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem}
/* Repère 124 (22/09/2026) — le badge Wedding Awards, servi par nous, sans script externe. */
.foot-badge{display:inline-block;margin-top:1rem;line-height:0;border-radius:50%;
  box-shadow:0 2px 10px -3px rgba(0,0,0,.45);transition:transform .2s ease}
.foot-badge:hover{transform:translateY(-2px)}
.foot-badge img{width:110px;height:110px;border-radius:50%;display:block}
.foot-marque .sceau{width:168px;height:168px;margin-bottom:1rem;opacity:.95}
.foot-marque p{font-size:.98rem;color:#D8C9B2;max-width:34ch;margin-top:.4rem}
.foot-marque .manuscrit{color:#E8B896;font-size:1.25rem;display:block;margin-top:1.1rem;transform:rotate(-1.2deg)}
footer h4{font-family:var(--serif);font-weight:480;font-size:1.05rem;margin-bottom:1rem;color:#F7EFDC}
footer ul{list-style:none}
footer li{margin-bottom:.5rem}
footer a{color:#D8C9B2;text-decoration:none;font-size:.97rem;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
footer a:hover{color:#F7EFDC;border-color:rgba(232,184,150,.5)}
.foot-bas{
  margin-top:3.5rem;padding-top:1.4rem;border-top:1px dashed rgba(216,201,178,.35);
  display:flex;gap:1rem 2rem;flex-wrap:wrap;justify-content:space-between;
  font-size:.85rem;color:#B7A68C;
}
.foot-bas .credits{font-style:italic}

/* CTA mobile collant */
.cta-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:850;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));background:rgba(247,241,230,.96);border-top:1px dashed rgba(110,88,67,.5);box-shadow:0 -6px 18px -8px rgba(59,43,31,.3);transform:translateY(110%);transition:transform .35s ease}
.cta-mobile.visible{transform:none}
.cta-mobile .btn{display:block;text-align:center}

/* révélations — .rev glisse, .rev-o (éléments inclinés) ne joue que l'opacité */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rev.vu{opacity:1;transform:none}
.rev-o{opacity:0;transition:opacity .8s ease}
.rev-o.vu{opacity:1}
@media(prefers-reduced-motion:reduce){.rev,.rev-o{opacity:1;transform:none;transition:none}}

/* ══ responsive ══ */
@media(max-width:1230px){
  nav.liens a:nth-child(-n+7){display:none}
  .burger{display:block}
}
@media(max-width:960px){
  .rencontre,.pourquoi{grid-template-columns:1fr;gap:2.6rem}
  .rencontre .tirage{margin:0 auto}
  .spread{grid-template-columns:1fr}
  .spread::before,.spread::after{display:none}
  .page+.page{border-top:2px dashed rgba(110,88,67,.4)}
  .avis-grille{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .avis-carte:nth-child(2){transform:rotate(.7deg)}
}

/* La frise bascule PLUS TÔT que le reste de la page : au-dessous de 1280 px les
   marges ne logent plus une photo de 150 px hors des colonnes (100 px de marge
   seulement sur un écran de 1100). Les polaroïds repassent alors dans le fil. */
@media(max-width:1279px){
  .fil-svg{left:-40px;transform:none}
  .etape{width:auto;margin-left:64px !important;margin-right:0 !important}
  .etape .num{left:-64px !important;right:auto !important}
  .frise .tirage.pin{position:relative;inset:auto;margin:0 0 2rem 64px;width:150px}
  .pin-1,.pin-2,.pin-3{left:auto;right:auto;transform:rotate(-2deg)}
}
@media(max-width:640px){
  body{font-size:1.06rem}
  .nav-cta{display:none}
  .rencontre-note{left:.2rem;top:-2.3rem;font-size:1.12rem}
  /* Le tirage se pose SOUS la barre fixe : 5rem = sceau 58 px + 2×.55rem
     de .nav-in. Au-dessus de 640 px le sceau fait 132 px, d'où les 9.6rem
     du bloc empilé. ⚠️ Toucher à .logo .sceau ou au padding de .nav-in
     impose de reporter la hauteur ici, sinon le haut de l'arche repasse
     derrière l'entête (défaut vu sur l'iPhone de Fabrice le 28/08). */
  .hero{padding-top:5rem}
  /* L'ENTÊTE SUR TÉLÉPHONE — trouvé le 26/08, non épinglé.
     Le sceau était forcé à 132 px par le CSS (le width="44" du HTML ne pèse
     rien) : il poussait le bouton du sommaire à 536 px sur un écran de 390,
     donc HORS DE L'ÉCRAN — le menu était inatteignable sur téléphone. */
  .logo .sceau{width:58px;height:58px}
  .logo b{font-size:1.02rem}
  .logo span{font-size:.6rem;letter-spacing:.12em;white-space:normal}
  .nav-in{padding:.55rem .9rem;gap:.6rem}
  .chap{padding:4rem 1.1rem}
  .page{padding:2rem 1.4rem}
  .table-photos{gap:1.1rem}
  .table-photos .tirage{width:calc(50% - .8rem)}
  .foot-grille{grid-template-columns:1fr 1fr;gap:2rem}
  .cta-mobile{display:block}
  footer{padding-bottom:5.5rem}
}

/* ═══════════════════════════════════════════════════════════════════
   AJOUTS DU 26/08/2026 — pages intérieures (composition Zénith Event).
   Quatre compléments qui n'utilisent que les variables du Carnet.
   ═══════════════════════════════════════════════════════════════════ */

/* Sous l'en-tête fixe, les pages intérieures respirent : leur premier chapitre
   descend sous la barre (l'accueil, qui commence par le hero, n'est pas touché). */
.sommaire + main > .chap:first-child{padding-top:clamp(6.5rem,4.5rem + 9vw,13rem)}

/* Le H1 des pages intérieures — même dessin que le titre de chapitre. */
h1.chap-titre{font-size:clamp(2.05rem,4vw,2.95rem);margin-bottom:1rem}

/* Chapo générique (la version .rencontre-texte .grande de l'accueil est inchangée). */
.grande{font-size:1.22rem}

/* Badge d'univers hors des doubles pages (.page .badge reste inchangé). */
.badge{
  display:inline-block;font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:.34rem .8rem;border-radius:3px 7px 4px 8px;margin-bottom:1rem;
}

/* Le crédit photo sous l'image (arbitrage du 22/08) — la classe exigée par le générateur. */
.credit{
  display:block;font-family:var(--texte);font-style:normal;
  font-size:.72rem;letter-spacing:.05em;color:var(--encre-pale);
  text-align:center;padding-top:.3rem;
}

/* ── MARQUAGE PROVISOIRE « À VALIDER » — À RETIRER AVANT LA PRODUCTION ──
   Tout texte vert foncé est un contenu PROPOSÉ par Zénith Event, rédigé sans
   source cliente : Cécile le valide, le corrige ou le remplace (méthode du
   21/08 : rien n'est laissé vide, tout se valide bloc par bloc).
   Pour tout éteindre d'un coup : supprimer ce bloc, ou passer --a-valider
   sur var(--encre). */
:root{--a-valider:#1F5C3A}
.a-valider{color:var(--a-valider)}
.a-valider .manuscrit,.manuscrit.a-valider{color:var(--a-valider)}

/* La barre de navigation à l'étroit entre 1231 et 1450 px : le bouton « Appel
   découverte » débordait de l'écran (constaté à 1280 et 1366 px, fenêtres de
   portable courantes). On resserre logo, interlettres et bouton — rien n'est
   masqué. Au-dessous de 1231 px, le sommaire mobile prend déjà le relais. */
@media(min-width:1231px) and (max-width:1450px){
  .logo .sceau{width:92px;height:92px}
  .nav-in{gap:1rem}
  nav.liens{gap:.68rem}
  nav.liens a:not(.btn){font-size:.88rem}
  .nav-cta{font-size:.84rem;padding:.55rem .9rem;margin-left:.2rem}
}

/* ── LES BLOCS DU BLOG (éditeur de Cécile, 27/08) — composants du Carnet ──
   Ces classes ne servent que sur les pages d'articles produites par l'espace
   de rédaction. Elles n'utilisent QUE les variables de la charte. */

/* Une section d'article sans en-tête de chapitre : photos, citations, encadrés. */
.chap-photo{padding-top:1.6rem;padding-bottom:1.6rem}
.chap-photo .chap-in{max-width:900px}
.chap-photo .table-photos{display:grid;gap:1.6rem;align-items:start}

/* La citation sur papier kraft — la parole des mariés, punaisée au carnet. */
.blog-citation{
  position:relative;max-width:620px;margin:0 auto;padding:2rem 2.2rem 1.6rem;
  background:var(--kraft);border-radius:2px;box-shadow:var(--ombre-tirage);
  transform:rotate(-.6deg);
}
.blog-citation p{
  font-family:var(--serif);font-size:1.25rem;line-height:1.45;
  font-style:italic;color:var(--encre);margin:0;
}
.blog-citation cite{
  display:block;margin-top:.9rem;text-align:right;font-size:1.15rem;
  font-style:normal;color:var(--terracotta-2);
}
.blog-citation .scotch{
  position:absolute;top:-11px;left:50%;width:86px;height:24px;
  transform:translateX(-50%) rotate(var(--scotch-angle,2deg));
  background:var(--scotch-ruban,rgba(226,214,186,.65));border:1px solid rgba(59,43,31,.08);
}

/* L'encadré « à retenir » — le repère sauge de la transmission, en plus doux. */
.blog-retenir{
  max-width:640px;margin:0 auto;padding:1.5rem 1.8rem;
  background:var(--sauge-pale);border-left:3px solid var(--sauge);
  border-radius:2px;
}
.blog-retenir .etiquette{color:var(--sauge-encre);margin-bottom:.5rem}
.blog-retenir p{margin:.4em 0}
.blog-retenir ul,.blog-retenir ol{margin:.4em 0 .4em 1.2em}

/* Le fil rouge séparateur — un point de couture entre deux idées. */
.blog-fil{max-width:260px;margin:0 auto;padding:1.2rem 0}
.blog-fil svg{display:block;width:100%;height:auto}

/* « Pour aller plus loin » — les renvois vers les piliers. */
.blog-plusloin{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}

/* ═══════════════════════════════════════════════════════════════════
   AJOUTS DU 11/09/2026 — traitement des 46 repères de Cécile (cahier du
   2 septembre) et des décisions de la réunion du 31/08. Que des variables
   du Carnet ; chaque composant est nommé d'après ce qu'il sert.
   ═══════════════════════════════════════════════════════════════════ */

/* Une liste cochée à la main, hors du bloc .pourquoi (repères 29, 34). */
.liste-main{list-style:none;margin:1.1rem 0 1.4rem}
.liste-main li{
  padding:.55rem 0 .55rem 2.3rem;position:relative;color:var(--encre);
  border-bottom:1px dotted rgba(110,88,67,.35);font-size:1.05rem;
}
.liste-main li:last-child{border-bottom:none}
.liste-main li b{font-weight:500}
.liste-main li::before{
  content:"";position:absolute;left:.1rem;top:.85rem;width:22px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 10c4-1.5 8-2 12-2m-7-5c1.5 3.5 2.5 7 3 11' fill='none' stroke='%23D9483A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.liste-main.sauge li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 10c4-1.5 8-2 12-2m-7-5c1.5 3.5 2.5 7 3 11' fill='none' stroke='%237C8A6E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}

/* Les formules de la page coachings : de l'air entre chaque titre (repères 12 à 16). */
.marge>h3{font-size:1.5rem;margin:2.1rem 0 .55rem}
.marge>h3+p{margin-top:0}
.marge>.lien-fleche{margin-top:.5rem}
.marge>.lien-fleche+h3{margin-top:2.4rem}

/* Un intertitre de paragraphe dans une .marge (« Ce qui fait la différence : »). */
.marge h4,.offre h4{font-family:var(--serif);font-weight:480;font-size:1.12rem;margin:1.2rem 0 .2rem;color:var(--encre)}
.marge p+p,.offre p+p{margin-top:.9rem}

/* ── Le tarif au survol, sur une feuille de parchemin (repère 17, coachings) ──
   Le titre de la formule porte un <span class="tarif-survol" tabindex="0">
   qui déplie un petit parchemin au survol, au clavier (focus) et au doigt
   (un toucher met le focus). Rien n'est caché au lecteur d'écran : le
   parchemin est du texte ordinaire, simplement replié. */
.tarif-survol{position:relative;display:inline-block;cursor:help;outline:none}
.tarif-survol>.mot{border-bottom:2px dotted rgba(217,72,58,.55)}
.parchemin{
  position:absolute;left:0;top:calc(100% + .6rem);z-index:20;min-width:11rem;isolation:isolate;
  padding:1rem 1.4rem .95rem;font-family:var(--texte);font-size:.95rem;font-weight:400;text-align:center;
  line-height:1.4;color:var(--encre);letter-spacing:0;text-transform:none;white-space:nowrap;
  filter:drop-shadow(0 2px 3px rgba(59,43,31,.18)) drop-shadow(0 12px 18px rgba(59,43,31,.28));
  transform:rotate(-1.5deg) translateY(6px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s .22s;
}
.parchemin::before{ /* la feuille elle-même, découpée aux bords irréguliers, sous le texte */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(59,43,31,.16),rgba(59,43,31,0) 9%,rgba(59,43,31,0) 91%,rgba(59,43,31,.16)),
    linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 40%),
    var(--kraft);
  clip-path:polygon(0 4%,3% 0,50% 2%,97% 0,100% 5%,99% 50%,100% 95%,97% 100%,50% 98%,3% 100%,0 96%,1% 50%);
}
.parchemin b{font-family:var(--serif);font-weight:520;font-size:1.35rem;color:var(--terracotta-2);display:block}
.parchemin small{display:block;font-size:.8rem;color:var(--encre-2);font-style:italic}
.tarif-survol:hover>.parchemin,.tarif-survol:focus>.parchemin,.tarif-survol:focus-within>.parchemin{
  opacity:1;visibility:visible;transform:rotate(-1.2deg) translateY(0);transition:opacity .22s ease,transform .22s ease,visibility 0s;
}

/* ── Les deux formules de cérémonie (repère 34, page « Sur-mesure ou Thématique ») ── */
.offres{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;margin-top:2.6rem;align-items:start}
.offre{
  background:var(--papier-3);box-shadow:var(--ombre-tirage);padding:2.4rem 2.3rem 2.2rem;
  position:relative;border-radius:2px 6px 3px 7px;
}
.offre:nth-child(1){transform:rotate(-.5deg)}
.offre:nth-child(2){transform:rotate(.45deg)}
.offre .etiquette{display:block;margin-bottom:.6rem;color:var(--terracotta-2)}
.offre h3{font-size:clamp(1.55rem,2.4vw,2rem);margin-bottom:.35rem}
.offre .sous-titre{font-family:var(--serif);font-size:1.12rem;color:var(--encre-2);font-weight:400;margin-bottom:1rem}
.offre .manuscrit{display:block;color:var(--corail-encre);font-size:1.45rem;margin:.6rem 0 1.1rem;transform:rotate(-.8deg)}
.offre p{color:var(--encre);max-width:70ch}
.offre .liste-main{margin-bottom:1.6rem}
.offre .liste-main li{font-size:1rem;padding-top:.45rem;padding-bottom:.45rem}
.offre .acte{margin-top:1.4rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}

/* Le bouton qui dit son prix au survol (« Prix au survol : Dès 850 €* »). */
.btn-tarif{position:relative;overflow:hidden}
.btn-tarif .libelle,.btn-tarif .prix{display:block;transition:transform .25s ease,opacity .25s ease}
.btn-tarif .prix{position:absolute;inset:0;display:grid;place-items:center;transform:translateY(100%);opacity:0;font-family:var(--serif);font-weight:520;letter-spacing:.02em}
.btn-tarif:hover .libelle,.btn-tarif:focus .libelle{transform:translateY(-100%);opacity:0}
.btn-tarif:hover .prix,.btn-tarif:focus .prix{transform:none;opacity:1}
.note-tarif{font-size:.85rem;color:var(--encre-pale);font-style:italic;margin-top:.4rem}

/* ── « Comme si j'écrivais la phrase en direct » (repère 34, La Sublime) ──
   carnet.js découpe la phrase en lettres ; chacune apparaît à son tour quand
   le bloc entre dans l'écran. Sans JS, ou en mouvement réduit, la phrase est
   simplement là. */
.ecrit-direct .lettre{opacity:0;transition:opacity .05s linear}
.ecrit-direct.joue .lettre{opacity:1}
@media(prefers-reduced-motion:reduce){.ecrit-direct .lettre{opacity:1;transition:none}}

/* ── Le tableau comparatif des deux formules (repère 35) ── */
.tableau-offres{width:100%;border-collapse:separate;border-spacing:0;margin-top:2.2rem;background:var(--papier-3);box-shadow:var(--ombre-tirage);border-radius:2px}
.tableau-offres th,.tableau-offres td{padding:1.05rem 1.2rem;vertical-align:top;text-align:left;border-bottom:1px dotted rgba(110,88,67,.4);font-size:1rem;line-height:1.5}
.tableau-offres thead th{font-family:var(--serif);font-weight:500;font-size:1.08rem;color:var(--encre);background:var(--kraft);border-bottom:2px solid rgba(110,88,67,.35)}
.tableau-offres thead th:first-child{color:var(--encre-2);font-weight:400;font-style:italic}
.tableau-offres tbody th{font-family:var(--serif);font-weight:480;color:var(--terracotta-2);width:22%;font-size:1.02rem}
.tableau-offres td{color:var(--encre);width:39%}
.tableau-offres tr:last-child th,.tableau-offres tr:last-child td{border-bottom:none}
.tableau-offres td b{font-weight:500}
.tableau-offres .enveloppe{overflow-x:auto}
@media(max-width:760px){
  .tableau-offres thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tableau-offres tr{display:block;padding:.6rem 0;border-bottom:2px dashed rgba(110,88,67,.4)}
  .tableau-offres tr:last-child{border-bottom:none}
  .tableau-offres th,.tableau-offres td{display:block;width:auto;border-bottom:none;padding:.45rem 1.1rem}
  .tableau-offres tbody th,.tableau-offres td{width:auto} /* plus fort que le 22 % de bureau */
  .tableau-offres tbody th{padding-top:.8rem}
  .tableau-offres td::before{content:attr(data-formule);display:block;font-family:var(--texte);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-2);margin-bottom:.15rem}
}
.sous-tableau{margin-top:1.8rem;max-width:70ch}
.sous-tableau .etiquette{display:block;margin-bottom:.4rem}

/* ── Le carrousel de l'invitation finale (repère 42) : les tirages se relaient
   en fondu derrière la carte, sans jamais laisser d'instant vide. ── */
.invitation .photo.carrousel img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.invitation .photo.carrousel img.vue,
.invitation .photo.carrousel:not(.lance) img:first-child{opacity:1} /* sans JS : la première reste */

/* ── Le tableau à quatre entrées de « Mon histoire » (réunion du 31/08) ──
   J'aime / J'aime pas / Je suis / Une citation — deux lignes, deux colonnes,
   tout visible d'un coup d'œil, aucun déroulé. C'est Cécile qui écrit les cases. */
.quatre-cases{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.4rem}
.quatre-cases>div{
  background:var(--papier-3);box-shadow:var(--ombre-tirage);padding:1.7rem 1.8rem 1.5rem;
  position:relative;min-height:9rem;
}
.quatre-cases>div:nth-child(1){transform:rotate(-.8deg)}
.quatre-cases>div:nth-child(2){transform:rotate(.6deg) translateY(6px)}
.quatre-cases>div:nth-child(3){transform:rotate(.5deg)}
.quatre-cases>div:nth-child(4){transform:rotate(-.7deg) translateY(4px)}
.quatre-cases h3{font-family:var(--main);font-weight:500;font-size:1.7rem;color:var(--corail-encre);margin-bottom:.5rem}
.quatre-cases p{color:var(--encre);font-size:1.02rem}
.quatre-cases .scotch{width:90px;height:26px}

@media(max-width:960px){
  .offres{grid-template-columns:1fr;gap:2.2rem}
  .offre:nth-child(1),.offre:nth-child(2){transform:none}
}
@media(max-width:640px){
  .quatre-cases{grid-template-columns:1fr;gap:1.3rem}
  .offre{padding:1.8rem 1.4rem 1.7rem}
  .parchemin{min-width:12rem}
}

/* ═══════════════════════════════════════════════════════════════════
   AJOUTS DU 22/09/2026 — pastilles texte de Cécile (14-18/09).
   ═══════════════════════════════════════════════════════════════════ */

/* Les quatre cases « En mode confidence » : ses listes, au trait léger (repères 106, 108). */
.quatre-cases ul{list-style:none;margin:.2rem 0 0}
.quatre-cases li{
  position:relative;padding:.22rem 0 .22rem 1.25rem;color:var(--encre);font-size:1.02rem;line-height:1.45;
}
.quatre-cases li::before{
  content:"";position:absolute;left:0;top:.95rem;width:.8rem;height:2px;
  background:var(--corail-encre);transform:rotate(-6deg);border-radius:2px;
}
.quatre-cases p+p{margin-top:.6rem}
/* L'auteur d'une citation, à la main, comme une signature (repère 110). */
.quatre-cases .citation-auteur{
  font-family:var(--main);font-size:1.25rem;color:var(--corail-encre);text-align:right;margin-top:.5rem;
}

/* Le crédit sur les photos hors tirage (arbitrage du 22/09) : héro de l'accueil et fonds d'invitation.
   Posé en coin, sur l'image, en papier ombré ; sur téléphone le crédit du héro repasse sous le pavé. */
.hero-tirage>.credit{
  position:absolute;left:.9rem;bottom:.55rem;z-index:5;padding:0;text-align:left;
  color:rgba(251,247,238,.88);text-shadow:0 1px 2px rgba(0,0,0,.55);
}
@media(max-width:899.98px),(max-height:639.98px){
  .hero-tirage>.credit{position:static;color:var(--encre-pale);text-shadow:none;text-align:center;padding-top:.6rem}
}
.invitation .photo .credit-fond{
  position:absolute;right:.9rem;bottom:.5rem;z-index:3;padding:0;text-align:right;
  color:rgba(251,247,238,.88);text-shadow:0 1px 2px rgba(0,0,0,.55);
}

/* ═══════════════════════════════════════════════════════════════════
   LE FORMULAIRE (22/09/2026) — rendez-vous et contact. Un seul écran,
   champs en papier, cases à cocher en petites étiquettes. Rien qu'avec
   les variables du Carnet. Remplace les styles en ligne de contact.php.
   ═══════════════════════════════════════════════════════════════════ */
.formulaire{margin-top:1.6rem;max-width:62ch}
.formulaire .piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-ligne{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.form-champ{margin-bottom:1rem}
.form-champ label{display:block;font-size:.95rem;color:var(--encre-2);margin-bottom:.3rem}
.form-champ label b{color:var(--terracotta-2);font-weight:500}
.form-champ label small{color:var(--encre-pale);font-size:.85rem}
.form-champ input,.form-champ textarea,.champ{
  display:block;width:100%;padding:.6rem .75rem;font:inherit;font-size:1rem;font-weight:380;
  color:var(--encre);background:var(--papier);border:1.5px solid var(--kraft-2);border-radius:7px 3px 8px 4px;
}
.form-champ textarea{min-height:5.6rem;resize:vertical}
.form-champ input:focus,.form-champ textarea:focus,.champ:focus{outline:2px solid rgba(169,80,42,.35);outline-offset:1px}
.form-champ input::placeholder,.form-champ textarea::placeholder{color:var(--encre-pale);opacity:.8}
.form-choix,.form-cases{border:0;padding:0;margin:0 0 1.1rem}
.form-choix legend,.form-cases legend{font-size:.95rem;color:var(--encre-2);margin-bottom:.45rem;padding:0}
.form-choix label,.form-cases label{display:inline-block;margin:0 .45rem .45rem 0;cursor:pointer}
.form-choix input,.form-cases input{position:absolute;opacity:0;width:1px;height:1px}
.form-choix span,.form-cases span{
  display:inline-block;padding:.42rem .85rem;font-size:.95rem;color:var(--encre);
  background:var(--papier);border:1.5px solid var(--kraft-2);border-radius:7px 3px 8px 4px;
  transition:background .15s,border-color .15s,color .15s;
}
.form-choix input:checked+span,.form-cases input:checked+span{background:var(--terracotta);border-color:var(--terracotta-2);color:#FCF7ED}
.form-choix input:focus-visible+span,.form-cases input:focus-visible+span{outline:2px solid rgba(169,80,42,.45);outline-offset:2px}
.form-envoi{margin-top:.6rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.form-envoi .btn{border:none;cursor:pointer}
.form-note{font-size:.85rem;color:var(--encre-pale)}
.form-note a{color:var(--encre-2)}
.form-erreur{
  margin:0 0 1rem;padding:.7rem .9rem;font-size:.95rem;color:var(--terracotta-2);
  background:#F6E3DA;border-left:3px solid var(--terracotta);border-radius:0 6px 6px 0;
}
.form-erreur[hidden]{display:none}
@media(max-width:640px){.form-ligne{grid-template-columns:1fr}}
/* Sur une page qui porte déjà un formulaire (rendez-vous, contact), le bouton
   flottant du téléphone renverrait vers ce qu'on a sous les yeux : on le retire. */
body:has(form.formulaire) .cta-mobile{display:none!important}

/* ══ PETITES TOUCHES DU CAHIER (29/09/2026, repères 134-136, 175-176, 204, 252, 280, 396-398, 432) ══
   Pictos au trait (téléphone, stylo), cadres blancs pour les citations et les formules,
   ruban adhésif devant le nom de chaque formule de coaching. */
.picto{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.4em;
  fill:none;stroke:var(--corail-encre);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.citation-cadre{
  display:block;max-width:70ch;margin:1.3rem auto 1.4rem;padding:1.15rem 1.5rem;
  background:var(--papier-3);box-shadow:var(--ombre);border-radius:3px 7px 4px 8px;
  text-align:center;font-style:italic;font-size:1.08rem;line-height:1.55;color:var(--encre);
}
.citation-cadre cite{display:block;margin-top:.5rem;font-style:normal;font-size:.85rem;color:var(--encre-2)}
.cadre-blanc{
  display:inline-block;margin:.1rem 0 .9rem;padding:.35rem .95rem;
  background:var(--papier-3);box-shadow:var(--ombre);border-radius:3px 7px 4px 8px;
  font-weight:500;font-size:.98rem;
}
.formule-cadre{
  position:relative;margin:2.6rem 0 1.6rem;padding:2.2rem 2.1rem 1.7rem;
  background:var(--papier-3);box-shadow:var(--ombre-tirage);border-radius:2px 6px 3px 7px;
}
.formule-cadre>.scotch{left:2.4rem;transform:rotate(var(--scotch-angle,-2deg));width:120px}
.formule-cadre>h3{margin-top:0}
@media(max-width:640px){.formule-cadre{padding:1.9rem 1.2rem 1.4rem}}

/* ══ LARGEURS DE LIGNE (29/09/2026, repères 137-139) ══
   Règle : aucun retour à la ligne qui ne dépende pas de la largeur de l'écran.
   Phrases courtes : aucune largeur maximale. Longs paragraphes : 70 caractères au plus.
   Dans le bandeau « où ça se passe » du contact, le gras reste dans la phrase. */
.ruban-phrase p b{display:inline;font-family:inherit;font-size:inherit;font-weight:600;margin:0}

/* ══ PAGE AVIS — les notes en trois blocs (29/09/2026, repères 325-327) ══ */
.avis-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.6rem;max-width:900px}
.avis-note-bloc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;
  padding:1.3rem 1rem 1.2rem;background:var(--papier-3);box-shadow:var(--ombre);border-radius:3px 7px 4px 8px}
.avis-note-bloc b{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--encre);font-weight:480}
.avis-note-bloc span{font-size:1rem;color:var(--encre-2)}
.etoiles-or{color:#F2C230;letter-spacing:.14em;font-size:1.2rem}
@media(max-width:700px){.avis-notes{grid-template-columns:1fr;max-width:360px}}

/* ══ PAGE AVIS — encart « vu à la télé » (342) et texte manuscrit qui s'écrit mot à mot (343) ══ */
.vu-tele{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;padding:.4rem 1rem .4rem .45rem;
  background:var(--papier-3);box-shadow:var(--ombre);border-radius:3px 8px 4px 9px;transform:rotate(-1.2deg);
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);font-weight:500}
.vu-tele span{background:var(--corail);color:#fff;padding:.3rem .65rem;border-radius:2px 5px 3px 6px;letter-spacing:.1em}
.mots-a-mots{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.35;color:var(--encre);margin-bottom:1.4rem}
.mots-a-mots span{opacity:0;transition:opacity .45s ease calc(var(--i) * 90ms)}
.mots-a-mots.vu span{opacity:1}
@media(prefers-reduced-motion:reduce){.mots-a-mots span{opacity:1;transition:none}}
.avis-label{display:block;margin-top:.35rem;line-height:0}
.avis-label img{width:130px;height:auto}