/* Jour Dit : feuille de style de la page. Valeurs : marque/tokens.json (charte « Atelier à plat »). */
@font-face{font-family:'Switzer';font-weight:400;font-display:swap;src:url(/fonts/Switzer-400-normal.woff2) format('woff2')}
@font-face{font-family:'Switzer';font-weight:500;font-display:swap;src:url(/fonts/Switzer-500-normal.woff2) format('woff2')}
@font-face{font-family:'Erode';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/Erode-300-italic.woff2) format('woff2')}

:root{
  --fond:#FAFAF7; --encre:#111111; --encre-2:#55554F; --filet-col:#D9D9D4;
  --aplat-pre:#E4EBD3; --aplat-jetee:#DCE6F0; --aplat:var(--aplat-pre);
  --courbe:cubic-bezier(0.2,0.7,0.2,1); --entree:600ms; --decalage:80ms; --selection:250ms;
  --marge:48px; --gout:24px; --section:120px; --large:1344px;
  --t-h1:56px; --t-h2:32px; --t-h3:20px; --t-texte:17px;
}
@media (max-width:760px){:root{--marge:16px; --gout:16px; --section:72px; --t-h1:36px; --t-h2:26px; --t-h3:18px; --t-texte:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--fond);color:var(--encre);font:400 var(--t-texte)/1.5 'Switzer',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:var(--marge);top:-60px;background:var(--encre);color:var(--fond);padding:12px 20px;border-radius:999px;z-index:20}
.evitement:focus{top:12px}

.cadre{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout)}
@media (max-width:760px){.grille{grid-template-columns:repeat(4,minmax(0,1fr))}}

.etiquette{font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.secondaire{color:var(--encre-2)}
.prenom{font-family:'Erode',serif;font-style:italic;font-weight:300}

/* Boutons : pilule, cible de 48 px */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--encre);background:var(--encre);color:var(--fond);font:500 16px/1 'Switzer',sans-serif;text-decoration:none;cursor:pointer;transition:transform 160ms var(--courbe),background-color 160ms ease}
.bouton:active{transform:scale(.97)}
.bouton.leger{background:transparent;color:var(--encre)}
@media (hover:hover) and (pointer:fine){.bouton:hover{background:#2a2a28}.bouton.leger:hover{background:rgba(17,17,17,.06)}}

/* En-tête */
.entete{position:sticky;top:0;z-index:10;background:rgba(250,250,247,.86);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color 200ms ease}
.entete.defile{border-bottom-color:var(--encre)}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.nom{font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:12px 0}
.nav{display:flex;align-items:center;gap:28px}
.nav a:not(.bouton){text-decoration:none;font-size:15px;padding:12px 0}
@media (hover:hover) and (pointer:fine){.nav a:not(.bouton):hover{text-decoration:underline}}
.nav .bouton{min-height:44px;padding:0 18px;font-size:15px}
@media (max-width:820px){.nav a:not(.bouton){display:none}}

/* Héros : filets de colonnes, titre, table du kit */
.heros{position:relative;padding:56px 0 var(--section)}
.heros .colonnes{position:absolute;inset:0;pointer-events:none}
.heros .colonnes .grille{height:100%}
.heros .colonnes span{border-left:1px solid var(--filet-col);height:100%}
.heros .colonnes span:last-child{border-right:1px solid var(--filet-col)}
.heros .grille.contenu{position:relative;align-items:start}
.heros-texte{grid-column:1 / span 5;padding-top:24px}
.heros h1{font-size:var(--t-h1);line-height:1.05;letter-spacing:-.02em}
.accroche{margin-top:28px;font-size:19px;line-height:1.55;max-width:30em}
.vignette{display:inline-block;height:1.4em;width:auto;vertical-align:-.32em;margin:0 .12em;border-radius:2px;box-shadow:0 1px 3px rgba(17,17,17,.18)}
.heros .actions{margin-top:36px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.reassure{font-size:15px;color:var(--encre-2);max-width:26em}
.heros-visuel{grid-column:7 / span 6}
@media (max-width:980px){.heros-texte{grid-column:1 / span 12}.heros-visuel{grid-column:1 / span 12;margin-top:40px}}
@media (max-width:760px){
  .heros{padding-top:28px}
  .heros-texte,.heros-visuel{grid-column:1 / span 4}
  .heros-texte{padding-top:0}
  .accroche{font-size:17px;margin-top:16px}
  .heros .actions{margin-top:20px;gap:10px}
  .heros-visuel{margin-top:28px}
}

/* La table du kit et le signe : traits de coupe */
.coupe{position:relative;margin:24px}
.coupe i{position:absolute;width:16px;height:16px;pointer-events:none;transition:opacity 200ms ease}
.coupe i::before,.coupe i::after{content:"";position:absolute;background:var(--encre)}
.coupe i::before{width:16px;height:1px}
.coupe i::after{width:1px;height:16px}
.coupe i:nth-of-type(1){left:-24px;top:-24px}.coupe i:nth-of-type(1)::before{left:0;top:23px;width:16px}.coupe i:nth-of-type(1)::after{left:23px;top:0}
.coupe i:nth-of-type(2){right:-24px;top:-24px}.coupe i:nth-of-type(2)::before{right:0;top:23px}.coupe i:nth-of-type(2)::after{right:23px;top:0}
.coupe i:nth-of-type(3){left:-24px;bottom:-24px}.coupe i:nth-of-type(3)::before{left:0;bottom:23px}.coupe i:nth-of-type(3)::after{left:23px;bottom:0}
.coupe i:nth-of-type(4){right:-24px;bottom:-24px}.coupe i:nth-of-type(4)::before{right:0;bottom:23px}.coupe i:nth-of-type(4)::after{right:23px;bottom:0}
@media (max-width:760px){.coupe{margin:16px}.coupe i:nth-of-type(1),.coupe i:nth-of-type(3){left:-16px}.coupe i:nth-of-type(2),.coupe i:nth-of-type(4){right:-16px}.coupe i:nth-of-type(1),.coupe i:nth-of-type(2){top:-16px}.coupe i:nth-of-type(3),.coupe i:nth-of-type(4){bottom:-16px}.coupe i{transform:scale(.75)}}

.table{position:relative;aspect-ratio:420 / 280;background:var(--aplat);transition:background-color var(--selection) var(--courbe);overflow:hidden}
.table img{position:absolute;box-shadow:-2px 6px 14px rgba(17,17,17,.13),-1px 1px 2px rgba(17,17,17,.08)}
.table [data-p="menu"]{left:5.7%;top:14.3%;width:23.8%}
.table [data-p="faire-part"]{left:33.3%;top:10.7%;width:35.2%}
.table [data-p="save-the-date"]{left:72.4%;top:7.9%;width:25%}
.table [data-p="marque-places"]{left:73.8%;top:67.9%;width:21.4%}
.legende{margin:14px 24px 0;font-size:13px;color:var(--encre-2)}
@media (max-width:760px){.legende{margin-left:16px;margin-right:16px}}

/* Entrée des pièces (partition : montée de 20 px, 600 ms, 80 ms entre deux pièces) */
@media (prefers-reduced-motion:no-preference){
  .js .table.attend img{opacity:0;transform:translateY(20px)}
  .table img{transition:opacity var(--entree) var(--courbe),transform var(--entree) var(--courbe)}
  .table img:nth-child(2){transition-delay:var(--decalage)}
  .table img:nth-child(3){transition-delay:calc(var(--decalage)*2)}
  .table img:nth-child(4){transition-delay:calc(var(--decalage)*3)}
}
@media (prefers-reduced-motion:reduce){
  .js .table.attend img{opacity:0}
  .table img{transition:opacity 200ms ease}
}
.table.change img{opacity:0;transition:opacity 150ms ease!important;transition-delay:0s!important}

/* Sections */
.section{padding:var(--section) 0;border-top:1px solid var(--encre)}
.section-titre{grid-column:1 / span 5}
.section-titre h2{font-size:var(--t-h2);line-height:1.15}
.section-titre p{margin-top:16px;color:var(--encre-2);max-width:30em}
@media (max-width:980px){.section-titre{grid-column:1 / -1}}

/* Les kits */
.kit{padding:var(--section) 0;border-top:1px solid var(--encre)}
.kit .grille{align-items:start}
.kit-texte{grid-column:1 / span 4}
.kit-texte h3{font-size:var(--t-h2);line-height:1.15;font-weight:400}
.kit-texte p{margin-top:16px;max-width:28em}
.kit-texte .actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.kit-texte .exemple{margin-top:16px;font-size:14px;color:var(--encre-2)}
.kit-planche{grid-column:6 / span 7;background:var(--aplat-k);padding:40px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 20px;align-items:start}
.kit-planche img{box-shadow:-2px 6px 14px rgba(17,17,17,.13),-1px 1px 2px rgba(17,17,17,.08)}
.kit-planche .p-fp{grid-column:1 / 6;grid-row:1}
.kit-planche .p-menu{grid-column:6 / 9;grid-row:1;margin-top:8%}
.kit-planche .p-std{grid-column:9 / 13;grid-row:1}
.kit-planche .p-carton{grid-column:1 / 6;grid-row:2}
.kit-planche .p-marque{grid-column:7 / 11;grid-row:2;align-self:center}
@media (max-width:980px){.kit-texte{grid-column:1 / -1}.kit-planche{grid-column:1 / -1;margin-top:32px}}
@media (max-width:760px){.kit-planche{padding:20px;gap:12px}}

/* Aperçu des 8 pièces */

/* Comment ça marche */
.etapes{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout);margin-top:56px;list-style:none;padding:0}
.etapes > li{border-top:1px solid var(--encre);padding-top:20px}
.etapes .num{font-variant-numeric:tabular-nums;font-size:13px}
.etapes h3{font-size:var(--t-h3);font-weight:500;margin-top:10px}
.etapes p{margin-top:8px;color:var(--encre-2)}
.fragment{margin-top:24px;background:#fff;border:1px solid #E6E6E1;padding:16px 18px;font-size:14px;-webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.5) 82%,transparent);mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.5) 82%,transparent)}
.fragment dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.fragment dt{color:var(--encre-2)}
.fragment dd{margin:0}
.fragment ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.fragment .tag{font-size:12px;color:var(--encre-2)}
@media (max-width:760px){.etapes{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:40px}}

/* Contenu du kit */
.contenu-kit{grid-column:7 / span 6;margin:0;padding:0;list-style:none}
.contenu-kit li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #DCDCD6;font-variant-numeric:tabular-nums}
.contenu-kit li:first-child{border-top:1px solid var(--encre)}
.contenu-kit .format{color:var(--encre-2);text-align:right}
.contenu-note{grid-column:7 / span 6;margin-top:20px;color:var(--encre-2);font-size:15px}
@media (max-width:980px){.contenu-kit,.contenu-note{grid-column:1 / -1}.contenu-kit{margin-top:32px}}

/* Prix */
.prix-bloc{grid-column:7 / span 6}
.montant{font-size:96px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.montant-sous{margin-top:8px;font-size:19px}
.prix-bloc .ancre{margin-top:28px;padding-top:20px;border-top:1px solid #DCDCD6;max-width:34em}
.prix-bloc ul{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.prix-bloc li{padding-left:28px;position:relative}
.prix-bloc li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:1.5px solid var(--encre);border-bottom:1.5px solid var(--encre);transform:rotate(-45deg)}
.prix-bloc .actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px}
.plafond{margin-top:16px;font-size:15px;color:var(--encre-2)}
@media (max-width:980px){.prix-bloc{grid-column:1 / -1;margin-top:32px}}
@media (max-width:760px){.montant{font-size:72px}}

/* FAQ */
.faq{grid-column:7 / span 6}
.faq details{border-bottom:1px solid #DCDCD6}
.faq details:first-child{border-top:1px solid var(--encre)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--encre),var(--encre)) center/12px 1.5px no-repeat,linear-gradient(var(--encre),var(--encre)) center/1.5px 12px no-repeat;transition:transform 200ms var(--courbe)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .reponse{padding:0 0 20px;max-width:62ch;color:#2b2b28}
.faq .reponse p+p{margin-top:10px}
@media (max-width:980px){.faq{grid-column:1 / -1;margin-top:32px}}

/* Dernier appel et pied */
.final{padding:var(--section) 0;border-top:1px solid var(--encre)}
.final h2{font-size:var(--t-h2);line-height:1.15;grid-column:1 / span 7}
.final .actions{grid-column:1 / span 7;margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (max-width:760px){.final h2,.final .actions{grid-column:1 / -1}}
.pied{border-top:1px solid var(--encre);padding:40px 0 56px;font-size:14px;color:var(--encre-2)}
.pied .cadre{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.pied .signature{color:var(--encre);font-size:17px}
.pied nav{display:flex;flex-wrap:wrap;gap:20px}
.pied a{padding:12px 0;display:inline-block}

/* Corrections du 10/11 (critique adverse) */
.pied .liens-legaux{display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
.pied .liens-legaux a{margin-left:0 !important}
body>.liens-legaux{max-width:var(--large);margin:16px auto 0 !important;padding:0 var(--marge)}
@media (max-width:760px){.vignette{display:none}}
.faq>p a,.section-titre p a{display:inline-block;padding-block:12px;margin-block:-12px}

/* Parcours du 11/11 : sur mobile, le héros montre le faire-part seul et en grand (lisible), un seul bouton visible à la fois */
@media (max-width:760px){
  .table{aspect-ratio:1 / 1}
  .table [data-p="menu"],.table [data-p="save-the-date"],.table [data-p="marque-places"]{display:none}
  .table [data-p="faire-part"]{left:21%;top:9%;width:58%}
  .cta-heros-visible .entete .bouton{visibility:hidden}
}