@charset "utf-8";
/* =========================================================================
   Camille & Irvin — 12.06.2027
   Monde : papeterie couture. Vert velours possede les regions, l'ivoire est
   le carton pose dessus. Bodoni Moda grave, Jost filete.
   Echelle d'espacement base 4. Mobile-first : tout ce qui suit est le
   telephone ; les min-width ajoutent, ne corrigent pas.
   ========================================================================= */

/* ------------------------------------------------------------- 1. FONTES */
/* Bodoni Moda est un didone : son axe optique commande l'epaisseur des delies.
   Laisse libre, le navigateur cale opsz sur la taille du texte et les filets
   tombent a 0,2 px — le trait d'union et les empattements du "1" disparaissent
   purement et simplement (constate en capture pleine resolution).
   On livre donc deux coupes a opsz FIGE, choisies pour que le filet le plus fin
   ne descende jamais sous ~0,7 px a la taille ou la coupe est employee. */
@font-face{  /* opsz 12 — grandes tailles : prenoms, signature */
  font-family:"Bodoni Moda";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/bodoni-moda-latin.woff2") format("woff2");
}
@font-face{  /* opsz 9 — 24 a 44 px : titres, heures, chiffres */
  font-family:"Bodoni Texte";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/bodoni-moda-texte-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/bodoni-moda-italic-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../fonts/jost-latin.woff2") format("woff2");
}
/* Fallbacks a metriques accordees : le swap ne doit deplacer aucune ligne.
   Valeurs mesurees sur Liberation Sans/Serif (metric-compatibles Arial/Times). */
@font-face{
  font-family:"Bodoni fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");
  size-adjust:108.95%;ascent-override:103.25%;descent-override:36.71%;line-gap-override:0%;
}
@font-face{
  font-family:"Jost fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue");
  size-adjust:92.31%;ascent-override:115.92%;descent-override:40.63%;line-gap-override:0%;
}

/* ------------------------------------------------------------- 2. JETONS */
:root{
  /* Couleur — strategie : Committed. Le vert possede des regions entieres. */
  --velvet-deep:#06231B;
  --velvet:#0A3327;
  --velvet-lift:#0E5E42;
  --satin:#2F7D5B;
  --sage:#7FB79C;
  --paper:#F7F4EC;
  --paper-warm:#EFE9DB;
  --ink:#10201A;
  --ink-2:#47574F;
  --alarm:#B3452F;

  /* Espacement — base 4, les pas intermediaires qu'une echelle 8 rate */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px; --s9:96px; --s10:128px;

  /* Type — 4 tailles seulement. Le role se lit au traitement (capitales
     filetees, Bodoni), pas a un ecart d'un pixel. Ratio 28/13 = 2.15:1. */
  --fs-label:13px;
  --fs-meta:16px;
  --fs-body:19px;
  --fs-figure:28px;

  --gutter:22px;

  --rule:1px;
  --ease:cubic-bezier(.16,1,.3,1);
  --measure:62ch;
}

/* -------------------------------------------------------------- 3. SOCLE */
*,*::before,*::after{box-sizing:border-box}
:where(h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,fieldset,legend){margin:0;padding:0}
:where(ul,ol){list-style:none}
/* Sans ca, la moindre regle d'auteur avec `display:` ecrase l'attribut hidden
   et les blocs conditionnels restent visibles quoi qu'en dise le JS. Bug
   constate en vrai sur ce projet, pas une precaution theorique. */
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--velvet-deep);
}
body{
  margin:0;
  /* Le rebond en haut de page declenche le pull-to-refresh : un invite qui
     remonte d'un geste vif perdait son formulaire a moitie rempli. */
  overscroll-behavior-y:contain;
  -webkit-tap-highlight-color:transparent;
  /* Le sol de la page est le velours. L'ivoire n'est pas un fond : c'est un
     carton pose dessus, et chaque acte clair le declare lui-meme. */
  background-color:var(--velvet-deep);
  color:var(--paper);
  font-family:"Jost","Jost fallback",sans-serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.6;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* Le double-tap-zoom impose 300 ms d'attente sur chaque commande tactile :
   on le coupe sur les commandes, jamais sur le texte (le zoom pincement et le
   zoom page restent entiers). */
a,button,summary,label,input,textarea{touch-action:manipulation}

/* Retour d'appui : au doigt, l'etat :active est le seul accuse de reception. */
@media (hover:none){
  .aller__lien:active,.link:active{opacity:.55}
  .fold__sum:active{color:var(--velvet-lift)}
  .overture__cue:active{opacity:.55}
  .receipt__again:active{opacity:.55}
}

/* Surfaces navigateur : ce qu'on n'a pas dessine porte quand meme le design. */
::selection{background:var(--velvet-lift);color:var(--paper)}
:root{scrollbar-color:var(--velvet-lift) var(--paper-warm);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-warm)}
::-webkit-scrollbar-thumb{background:var(--velvet-lift);border:3px solid var(--paper-warm);border-radius:99px}
:focus-visible{
  outline:2px solid var(--velvet-lift);
  outline-offset:3px;
  border-radius:2px;
}
.on-velvet :focus-visible{outline-color:var(--sage)}

.u-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:99;
  background:var(--velvet);color:var(--paper);
  padding:var(--s4) var(--s5);min-height:44px;display:flex;align-items:center;
  text-decoration:none;
  font:500 var(--fs-meta)/1 "Jost","Jost fallback",sans-serif;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus-visible{top:var(--s4)}

/* --------------------------------------------------------- 4. TYPOGRAPHIE
   5 roles, jamais plus. Bodoni ne descend jamais sous 20px : les deliés
   d'un didone disparaissent en dessous, surtout sur Android bas de gamme. */
.t-display,.t-heading{
  font-family:"Bodoni Texte","Bodoni fallback",serif;
  font-weight:400;
  letter-spacing:-.018em;
  line-height:1.06;
  text-wrap:balance;
}
.t-display{font-family:"Bodoni Moda","Bodoni fallback",serif;font-size:clamp(2.75rem,13vw,6rem);line-height:1.02;letter-spacing:-.022em}
.t-heading{font-size:clamp(1.75rem,7vw,2.75rem)}
.t-label{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.4;
}
.t-body{font-size:var(--fs-body);line-height:1.6;max-width:var(--measure)}
.t-meta{font-size:var(--fs-meta);line-height:1.55;color:var(--ink-2)}

/* Sur fond sombre : compensation sur les trois axes a la fois. */
/* Didone sur fond sombre : les delies et les traits d'union s'effacent. On
   monte d'un cran de graisse. Defaut vu en capture (le "1" du compteur et le
   trait d'union de "Serez-vous" avaient disparu). */
.on-velvet{color:var(--paper)}
.on-velvet .t-display,.on-velvet .t-heading,.on-velvet .close__sig{font-weight:500}
.on-velvet .t-body,.on-velvet p{line-height:1.68;letter-spacing:.006em}
.on-velvet .t-meta{color:var(--sage)}

/* Filet — la respiration du monde, jamais une ombre sur du papier. */
.rule{
  display:block;height:var(--rule);border:0;
  background:currentColor;opacity:.28;
}

/* Donnee pas encore fixee. Le pointille est la convention du blanc a remplir ;
   elle est expliquee une fois, en toutes lettres, au lieu d'etre repetee en
   etiquette derriere chaque valeur (ou elle cassait les lignes). */
.tbc{
  background:none;color:inherit;
  text-decoration:underline dotted;
  text-decoration-thickness:1.5px;
  text-underline-offset:.32em;
  text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);
}

/* ------------------------------------------------------------ 5. STRUCTURE */
.shell{
  margin-inline:auto;
  max-width:min(100%,676px);
}
.act{padding:var(--s9) var(--gutter)}
.fieldset-bare{border:0;padding:0;margin:0}
.act--paper{background-color:var(--paper);color:var(--ink)}
.act--velvet{background-color:var(--velvet);color:var(--paper)}
.act--deep{background-color:var(--velvet-deep);color:var(--paper)}

/* Rythme : le contraste tendu/genereux EST le rythme. Plus d'air au-dessus
   d'un titre qu'en dessous. */
.act__title{margin-bottom:var(--s5)}
.act__intro{margin-bottom:var(--s8)}
.block + .block{margin-top:var(--s7)}
.block__title{margin-top:var(--s8);margin-bottom:var(--s3)}

/* ------------------------------------------------------- 6. ACTE I — NOEUD */
.overture{
  position:relative;
  height:100svh;              /* svh : jamais vh, la barre d'URL iOS rogne */
  background-color:var(--paper);
}
.js-ribbon .overture{height:240svh}   /* la piste : le noeud, puis l'encre */

.overture__sticky{
  position:sticky;top:0;
  height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  contain:paint;
}
.overture__gl{
  /* Au-DESSUS du carton : le ruban est un objet pose sur les prenoms, pas une
     image derriere eux. Transparent, et il ne prend aucun evenement. */
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;
  display:block;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease);
}
.js-gl .overture__gl{opacity:1}       /* le canvas peut etre visible sans piste de scrub
                                         (cas mouvement reduit : une seule image, figee) */

.overture__plate{
  /* Centre exact : les prenoms emergent pile sur la pliure. */
  position:absolute;z-index:1;left:0;right:0;top:50%;translate:0 -50%;
  text-align:center;
  padding-inline:var(--gutter);
  /* Rien n'est masque ici. Ce qui couvre les prenoms, c'est le carton lui-meme. */
}

/* La date et le chateau se calent sous les pans du noeud, a la distance que le
   modele 3D publie lui-meme dans --pans : aucun pourcentage devine par palier. */
.overture__ou{
  position:absolute;left:0;right:0;
  top:calc(50% + var(--pans,9vh) + var(--s6));
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding-inline:var(--gutter);
}
/* ------------------------------------------------ L'ENCRE QUI VIENT
   Le ruban parti, l'invitation se donne dans l'ordre : les prenoms, la date,
   puis le lieu. Trois fondus decales sur la meme variable --ouvert.
   Le repli vaut 1 : sans JS, --ouvert n'existe pas et les trois lignes sont
   simplement la. Rien n'est masque en CSS statique. */
.names   {opacity:clamp(0,calc( var(--ouvert,1)        * 2.5),1)}
.overture__date{opacity:clamp(0,calc((var(--ouvert,1) - .26) * 2.5),1)}
.overture__lieu{opacity:clamp(0,calc((var(--ouvert,1) - .52) * 2.3),1)}
.overture__ou{z-index:1}

/* L'ATTENTE — entre la premiere peinture et le ruban vivant.
   Le repli ci-dessus vaut 1, et c'est ce qu'on veut sans JS. Mais quand le JS
   tourne, ce repli tenait pendant tout le chargement du module : les prenoms,
   la date et le chateau restaient en clair a l'ecran, puis disparaissaient
   d'un coup quand le ruban prenait la main. Le noeud n'avait plus rien a
   decouvrir — l'invitation etait deja lue.
   Cette classe est posee par le script en tete de page, avant la premiere
   peinture, et seulement quand le ruban est attendu. app.js la retire des
   qu'il sait : soit il tient l'encre par --ouvert, soit il n'en tiendra
   jamais et elle revient entiere. Elle n'existe pas sans JavaScript. */
.js-attente .names,
.js-attente .overture__date,
.js-attente .overture__lieu{opacity:0}

.names{
  font-family:"Bodoni Moda","Bodoni fallback",serif;
  font-weight:400;
  /* "Camille & Irvin" fait 6.78x la taille de police en largeur d'encre (mesure
     au Range, pas estime). La formule garde la ligne dans la gouttiere de 320
     a 4K sans jamais la rogner. */
  font-size:clamp(2rem,calc(14.4vw - 7px),6rem);
  line-height:1;
  letter-spacing:-.022em;
  color:var(--ink);
  white-space:nowrap;
}
.names .amp{
  font-style:italic;font-weight:400;
  color:var(--velvet-lift);
  padding-inline:.06em;
}
.overture__date{
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);
}
.overture__date .rule{width:clamp(28px,9vw,64px);opacity:.4}
.overture__lieu{
  font-family:"Bodoni Texte","Bodoni fallback",serif;
  font-size:clamp(22px,6.2vw,28px);line-height:1.15;font-weight:400;letter-spacing:-.01em;
  color:var(--ink);text-align:center;text-wrap:balance;
}

.overture__cue{
  position:absolute;z-index:3;
  left:50%;translate:-50% 0;
  bottom:max(var(--s6),env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink-2);
  transition:opacity .35s var(--ease);
  /* C'est un vrai bouton : fond et bordure remis a zero, cible tactile pleine. */
  background:none;border:0;cursor:pointer;
  min-height:44px;padding:var(--s2) var(--s4);
  font-family:inherit;
}
.cue__mot::before{content:"Tirez sur le ruban"}
@media (pointer:coarse){.cue__mot::before{content:"Touchez le ruban"}}
/* Tant que l'invitation est fermee, tout le premier ecran est la poignee. */
.js-ribbon .overture__sticky[data-ouvert="0"]{cursor:pointer}
.overture__cue .rule{width:1px;height:34px;opacity:.45;animation:draw 2.8s var(--ease) infinite}
@keyframes draw{0%,100%{transform:scaleY(.35);opacity:.25}50%{transform:scaleY(1);opacity:.5}}
.overture__cue[data-spent="1"]{opacity:0;pointer-events:none}

/* ---------------------------------------------- 7. ACTE II — CARTON-REPONSE
   Le vert possede toute cette region. C'est la strategie couleur, pas un fond. */
.reply{position:relative}
.reply__head{text-align:center;margin-bottom:var(--s8)}
.reply__head .t-label{color:var(--sage);margin-bottom:var(--s4)}
.reply__head .t-heading{color:var(--paper)}
.reply__deadline{margin-top:var(--s4);color:var(--sage);font-size:var(--fs-meta)}

/* Champs : lignes gravees, pas de boites. Un composant de serie dans une
   forme engagee est une faute. */
.field{display:block;margin-top:var(--s6)}
.field__label{
  display:block;
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);
  margin-bottom:var(--s3);
}
.field__hint{display:block;font-size:var(--fs-meta);line-height:1.45;color:var(--sage);opacity:.9;
  margin:calc(var(--s2) * -1) 0 var(--s3);text-transform:none;letter-spacing:0;font-weight:400}

.input,.textarea{
  -webkit-appearance:none;appearance:none;
  width:100%;
  background:transparent;
  border:0;border-bottom:1px solid rgba(247,244,236,.34);
  border-radius:0;
  color:var(--paper);
  caret-color:var(--sage);
  font-family:inherit;font-size:var(--fs-body);font-weight:400;line-height:1.5;
  padding:var(--s3) 0;
  min-height:44px;
  transition:border-color .18s var(--ease);
}
.textarea{resize:vertical;min-height:88px}
.input::placeholder,.textarea::placeholder{color:rgba(247,244,236,.42)}
.input:hover,.textarea:hover{border-bottom-color:rgba(247,244,236,.6)}
.input:focus,.textarea:focus{outline:0;border-bottom-color:var(--sage);border-bottom-width:1.5px}
.input:focus-visible,.textarea:focus-visible{outline:0}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-bottom-color:#E08A72}
.input:disabled,.textarea:disabled{opacity:.45;cursor:not-allowed}

/* Le choix presence : deux cartons a cocher, marque gravee, pas de radio OS. */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s3)}
.choice__opt{position:relative}
.choice__opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice__face{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:56px;padding:var(--s3) var(--s4);
  border:1px solid rgba(247,244,236,.34);
  color:var(--paper);
  font-size:var(--fs-meta);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.choice__opt input:checked + .choice__face{
  background:var(--paper);border-color:var(--paper);color:var(--velvet);
}
.choice__opt input:focus-visible + .choice__face{outline:2px solid var(--sage);outline-offset:3px}
@media (hover:hover){.choice__opt input:not(:checked):hover + .choice__face{border-color:rgba(247,244,236,.7)}}

/* Bouton d'envoi : plein papier sur velours, la seule masse claire de l'acte. */
.seal{
  -webkit-appearance:none;appearance:none;
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
  width:100%;min-height:60px;margin-top:var(--s8);
  padding:var(--s4) var(--s6);
  background:var(--paper);color:var(--velvet);
  border:1px solid var(--paper);border-radius:0;
  font-family:inherit;font-size:var(--fs-meta);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),opacity .18s var(--ease);
}
.seal:active{background:var(--paper-warm)}
.seal[disabled]{opacity:.5;cursor:progress}
.seal svg{width:16px;height:16px;flex:none}
@media (hover:hover){.seal:hover{background:var(--paper-warm)}}

.form__status{margin-top:var(--s5);font-size:var(--fs-meta);line-height:1.5;min-height:1.5em}
.form__status[data-tone="error"]{color:#E9A491}
.form__status[data-tone="ok"]{color:var(--sage)}
.field__error{display:block;margin-top:var(--s2);font-size:var(--fs-meta);color:#E9A491}

/* Accuse de reception : une certitude tranquille, pas une explosion. */
.receipt{text-align:center;padding:var(--s7) 0}
.receipt__mark{width:56px;height:56px;margin:0 auto var(--s6);display:block;stroke:var(--sage)}
.receipt .t-heading{color:var(--paper);margin-bottom:var(--s4)}
.receipt p{color:var(--sage);margin-inline:auto;max-width:46ch}
.receipt__again{
  margin-top:var(--s6);background:none;border:0;border-bottom:1px solid var(--sage);
  color:var(--sage);font:500 var(--fs-label)/1 "Jost","Jost fallback",sans-serif;
  letter-spacing:.14em;text-transform:uppercase;padding:var(--s3) var(--s1);cursor:pointer;min-height:44px;
}

/* ------------------------------------------- 8. ACTE III — AU DOS DU CARTON */
.back{background-color:var(--paper);color:var(--ink)}
/* Les regions claires portent leur propre encre : rien n'herite du sol vert. */
.back .t-meta{color:var(--ink-2)}

/* Le deroule : une colonne d'heures gravees, une echine d'un cheveu, et un
   losange par moment — le meme losange que le sceau. Les heures sont en
   chiffres tabulaires, donc les unites s'alignent a la verticale : c'est ce qui
   fait qu'un horaire se lit d'un coup d'oeil au lieu de se dechiffrer.
   Le lieu n'est plus une phrase au-dessus du tableau, c'est la structure : deux
   groupes, deux echines. Un invite voit ou il doit etre sans lire. */
.jour{
  /* "15h00" en Bodoni tabulaire a 28px mesure 76,3px d'encre, a toutes les
     largeurs : la police n'est pas fluide, la colonne n'a donc aucune raison
     de l'etre. 88 = 76,3 + l'air qui separe l'heure de l'echine. */
  --col-h:96px;
  margin-top:var(--s6);
}
.jour__lieu{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--velvet-lift);
  margin-bottom:var(--s2);
}
.jour__lieu + .jour__liste{margin-bottom:var(--s8)}
.jour__liste:last-child{margin-bottom:0}
.jour__lieu:not(:first-child){margin-top:var(--s8)}

.jour__liste{position:relative}
/* L'echine ne court pas d'un bord a l'autre : elle relie le premier losange au
   dernier, et s'arrete la. Une ligne qui depasse ses points est un trait, pas
   une chronologie. */
.jour__liste::before{
  content:"";position:absolute;
  left:var(--col-h);top:var(--s6);bottom:var(--s6);
  width:1px;background:rgba(16,32,26,.20);
}
.jour__liste:has(li:only-child)::before{display:none}

.jour__moment{
  display:grid;
  grid-template-columns:var(--col-h) 1fr;
  align-items:center;
  column-gap:var(--s5);
}
.jour__h{
  font-family:"Bodoni Texte","Bodoni fallback",serif;
  font-size:var(--fs-figure);line-height:1;font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.01em;
  color:var(--ink);
  text-align:right;
  /* L'air entre le chiffre et le losange ne depend que de ce retrait : le
     losange est centre sur l'echine et deborde de 5px vers la gauche. */
  padding:var(--s4) var(--s4) var(--s4) 0;
}
.jour__quoi{
  position:relative;
  font-size:var(--fs-body);line-height:1.4;
  color:var(--ink);            /* c'est le contenu, pas une annotation */
  padding-block:var(--s4);
  text-wrap:pretty;
}
/* Le losange du sceau, repris a l'echelle du texte. */
.jour__quoi::before{
  content:"";position:absolute;
  left:calc(var(--s5) * -1 - 3.5px);top:50%;
  width:7px;height:7px;margin-top:-3.5px;
  background:var(--velvet-lift);
  rotate:45deg;
}
/* Losange ouvert pour le tout dernier moment de la journee — pas pour le
   dernier de chaque groupe, sinon la messe aurait l'air de clore la fete. */
.jour__liste:last-of-type li:last-child .jour__quoi::before{
  background:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--velvet-lift);
}

/* ------------------------------------------------------------- ADRESSES
   Deux blocs, aucune carte, aucune boite : un filet les separe comme deux
   paragraphes d'un meme carton. */
.adresse{padding:var(--s7) 0;border-top:1px solid rgba(16,32,26,.16)}
.adresse:last-of-type{border-bottom:1px solid rgba(16,32,26,.16)}
.adresse__role{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--velvet-lift);margin-bottom:var(--s3);
}
.adresse__nom{
  font-family:"Bodoni Texte","Bodoni fallback",serif;
  font-size:var(--fs-figure);line-height:1.15;font-weight:400;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance;
}
.adresse__rue{
  font-size:var(--fs-body);line-height:1.5;color:var(--ink-2);
  margin-top:var(--s2);
}
.adresse__note{
  font-size:var(--fs-meta);line-height:1.55;color:var(--ink);
  margin-top:var(--s5);
  padding-left:var(--s4);
  border-left:1px solid var(--velvet-lift);   /* 1px : un filet, pas un bandeau */
  max-width:52ch;
}
.adresse__menu{font-size:var(--fs-meta);color:var(--ink-2);margin-top:var(--s4)}

/* Trois itineraires, trois applications. Pas des boutons : des mots soulignes
   d'un cheveu, dans la meme voix que le reste du carton. */
.aller{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:0 var(--s2);
  margin-top:var(--s5);
}
.aller li{display:flex;align-items:center}
.aller li + li::before{
  content:"";width:1px;height:13px;margin-right:var(--s2);
  background:rgba(16,32,26,.24);
}
.aller__lien{
  display:inline-flex;align-items:center;justify-content:center;
  /* Le soulignement suit le mot, la cible tactile suit le doigt : min-width
     elargit la boite sans elargir le trait. "WAZE" mesurait 43,1 px. */
  min-height:44px;min-width:44px;padding-block:var(--s2);
  font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--velvet-lift);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.42em;
  text-decoration-color:rgba(14,94,66,.38);
  transition:text-decoration-color .18s var(--ease);
}
.aller__lien:hover,.aller__lien:focus-visible{text-decoration-color:currentColor}

/* Fiches pratiques : listes de definition, aucune carte imbriquee. */
.facts{margin-top:var(--s5)}
.facts div{padding:var(--s4) 0;border-top:1px solid rgba(16,32,26,.16)}
.facts div:last-child{border-bottom:1px solid rgba(16,32,26,.16)}
.facts dt{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:var(--s2);
}
.facts dd{font-size:var(--fs-body);line-height:1.55;color:var(--ink)}

.link{
  color:var(--velvet-lift);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.28em;
  text-decoration-color:rgba(14,94,66,.4);
  transition:text-decoration-color .18s var(--ease);
  display:inline-block;min-height:44px;padding-block:var(--s2);
}
.link:hover,.link:focus-visible{text-decoration-color:currentColor}
.on-velvet .link{color:var(--sage);text-decoration-color:rgba(127,183,156,.45)}

/* Divulgation progressive : on ne deverse pas toute la journee d'un coup. */
.fold{border-top:1px solid rgba(16,32,26,.16)}
.fold:last-of-type{border-bottom:1px solid rgba(16,32,26,.16)}
.fold__sum{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) 0;min-height:56px;
  cursor:pointer;list-style:none;
  font-family:"Bodoni Texte","Bodoni fallback",serif;
  font-size:var(--fs-figure);line-height:1.2;font-weight:400;letter-spacing:-.01em;
  color:var(--ink);
}
.fold__sum::-webkit-details-marker{display:none}
.fold__sum svg{width:16px;height:16px;flex:none;stroke:var(--velvet-lift);transition:transform .22s var(--ease)}
.fold[open] > .fold__sum svg{transform:rotate(45deg)}
.fold__body{padding-bottom:var(--s6)}

/* --------------------------------------------------- 9. ACTE IV — LE MOT */
.close{text-align:center;padding-bottom:calc(var(--s9) + 54px)}
.close__sig{
  font-family:"Bodoni Moda","Bodoni fallback",serif;
  font-style:italic;font-weight:400;
  font-size:clamp(2rem,9vw,3rem);line-height:1.15;
  color:var(--paper);
  margin-bottom:var(--s6);
}
.close__date{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);
}
.close__rule{width:64px;margin:var(--s7) auto;color:var(--sage)}

/* ------------------------------------------------ 10. ACTION PERMANENTE */
/* Le CTA vit dans la zone du pouce. Il n'apparait qu'apres l'ouverture,
   et se retire quand le carton-reponse est lui-meme a l'ecran. */
.thumb{
  position:fixed;
  left:var(--gutter);right:var(--gutter);
  bottom:max(var(--s4),env(safe-area-inset-bottom));
  z-index:20;
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:54px;padding:var(--s3) var(--s5);
  background:var(--velvet);color:var(--paper);
  text-decoration:none;
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 6px 24px -8px rgba(6,35,27,.45);
  transform:translateY(140%);
  transition:transform .4s var(--ease),opacity .3s var(--ease);
  opacity:0;
}
.thumb[data-shown="1"]{transform:translateY(0);opacity:1}
.thumb svg{width:14px;height:14px;flex:none}

/* ------------------------------------------------------ 11. RESPIRATIONS */
@media (min-width:640px){
  :root{--gutter:40px}
  .jour{--col-h:104px}
  .shell{max-width:620px}
  .act{padding:var(--s10) var(--gutter)}
  .choice{gap:var(--s4)}
  .thumb{left:auto;right:var(--s7);width:auto;min-width:240px}
}
@media (min-width:1024px){
  .shell{max-width:680px}
  .act{padding:160px var(--gutter)}
  :root{--fs-body:20px}
}
/* Paysage telephone : ~380px de haut, le titre doit tenir sans etre rogne. */
/* Ecran court : le bouton d'indice et le nom du chateau se disputent le bas.
   On resserre l'ecart sous les pans et on raccourcit le filet de l'indice. */
@media (max-height:640px){
  .overture__ou{top:calc(50% + var(--pans,9vh) + var(--s4))}
  .overture__cue .rule{height:22px}
  .overture__cue{gap:var(--s2)}
}
/* Sous 380px la ligne de date ne tient plus filetee a .2em : on resserre. */
@media (max-width:380px){
  .overture__date{gap:var(--s2);letter-spacing:.12em}
  .overture__date .rule{width:20px}
}
@media (max-height:520px) and (orientation:landscape){
  .names{font-size:clamp(2rem,7.5vh,3rem)}
  /* Ecran couche : on resserre l'ecart sous les pans, il n'y a pas la hauteur. */
  .overture__ou{top:calc(50% + var(--pans,9vh) + var(--s4))}
  .overture__cue{display:none}
}

/* ------------------------------------------- 12. MOUVEMENT REDUIT / SECOURS */
/* Moins de mouvement, pas zero : le retour d'action reste lisible. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-ribbon .overture{height:100svh}
  .overture__cue .rule{animation:none;transform:scaleY(.7)}
  .thumb{transition:opacity .2s linear;transform:none}
  .thumb:not([data-shown="1"]){opacity:0;pointer-events:none}
  *,*::before,*::after{scroll-behavior:auto!important}
}
@media print{
  .overture__gl,.thumb,.overture__cue,.skip{display:none!important}
  .act--velvet,.act--deep{background:#fff!important;color:#000!important}
  .js-ribbon .overture,.overture{height:auto}
  .fold__body{display:block!important}
}

/* ------------------------------------------------------- 13. UTILITAIRES
   Peu nombreux, et nommes par leur role dans ce monde, pas par leur valeur. */
.t-subheading{font-size:clamp(1.5rem,6vw,2rem)}
.u-center-measure{margin-inline:auto}
.u-quiet{color:var(--sage)}
.u-gap-s{margin-top:var(--s4)}
.u-gap-m{margin-top:var(--s5)}
.u-gap-l{margin-top:var(--s7)}
.u-flush{margin-top:0}
.u-nowrap{white-space:nowrap}   /* pour les composes qu'un trait d'union ne doit pas couper */