/* ════════════════════════════════════════════════════════════
   Halden — feuille de style du site (mêmes couleurs et polices que l'app)
   Marine #1e3a52 · Encre #17283a · Or #b08d57 · Bronze #8a6a35
   Papier #f6f2ea · Carte #fffdf8 · Fraunces + DM Sans (auto-hébergées)
   ════════════════════════════════════════════════════════════ */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/fraunces-variable.woff2') format('woff2-variations'),url('/fonts/fraunces-variable.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/fonts/fraunces-italic-variable.woff2') format('woff2-variations'),url('/fonts/fraunces-italic-variable.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-sans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/dm-sans-600.woff2') format('woff2')}

:root{
  --navy:#1e3a52;--navy2:#24455f;--ink:#17283a;--gold:#b08d57;--bronze:#8a6a35;--gold-soft:#f3eadb;--gold-light:#d9bf8c;
  --paper:#f6f2ea;--paper2:#efe8db;--card:#fffdf8;--line:#e6dfd2;--txt:#46566a;--mut:#66768a;--ok:#3f7a52;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r:16px;--sh:0 1px 0 rgba(23,40,58,.04),0 18px 40px -26px rgba(23,40,58,.42);
  --large:1180px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--txt);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-soft);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:16px;top:-60px;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:10px;z-index:300;text-decoration:none;font-weight:600}
.saut:focus{top:12px}

.cadre{width:min(var(--large),100% - 48px);margin-inline:auto}
@media (max-width:620px){.cadre{width:calc(100% - 32px)}}

/* ── Navigation ── */
.nav{position:sticky;top:0;z-index:200;background:var(--navy);border-bottom:1px solid rgba(176,141,87,.38)}
.nav .cadre{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.marque{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.marque svg{width:30px;height:30px;flex:none}
.marque span{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:-.01em}
.liens{display:flex;align-items:center;gap:30px;list-style:none}
.liens a{text-decoration:none;font-size:.9rem;color:rgba(255,255,255,.76);transition:color .2s}
.liens a:hover,.liens a[aria-current=page]{color:#fff}
.liens a[aria-current=page]{box-shadow:0 1px 0 var(--gold)}
.liens a.cta{color:var(--card);padding:9px 20px;border-radius:999px;border:1px solid var(--gold);font-weight:500;white-space:nowrap;box-shadow:none}
.liens a.cta:hover{background:var(--gold);color:var(--ink)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:24px;height:2px;background:rgba(255,255,255,.88);border-radius:2px;transition:transform .3s,opacity .3s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-mobile{display:none}
@media (max-width:900px){
  .liens{display:none}
  .burger{display:flex}
  .menu-mobile{position:fixed;top:72px;left:0;right:0;background:var(--navy);border-top:1px solid rgba(176,141,87,.3);padding:12px 16px 24px;z-index:199;box-shadow:0 18px 36px rgba(0,0,0,.25)}
  .menu-mobile.ouvert{display:block}
  .menu-mobile a{display:block;text-decoration:none;color:rgba(255,255,255,.86);padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.02rem}
  .menu-mobile a.cta{margin-top:16px;text-align:center;border:1px solid var(--gold);border-radius:999px;color:#fff;font-weight:500}
}

/* ── Typographie ── */
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:400;letter-spacing:-.015em;line-height:1.12;font-optical-sizing:auto}
h1{font-size:clamp(2.3rem,5.2vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:1.3rem;line-height:1.25}
h1 em,h2 em{font-style:italic;color:var(--bronze)}
p{max-width:68ch}
.surtitre{display:inline-flex;align-items:center;gap:12px;font-size:.84rem;font-weight:500;color:var(--bronze);margin-bottom:16px;letter-spacing:.01em}
.surtitre::before{content:'';width:28px;height:1px;background:var(--gold)}
.chapo{font-size:1.12rem;color:var(--txt);margin-top:18px}
.mut{color:var(--mut)}
.num{font-variant-numeric:tabular-nums}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:999px;text-decoration:none;font-size:.95rem;font-weight:500;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer;text-align:center}
.btn.plein{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.plein:hover{background:var(--ink)}
.btn.or{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.or:hover{background:var(--gold-light)}
.btn.contour{color:var(--navy);border-color:rgba(30,58,82,.28)}
.btn.contour:hover{border-color:var(--navy)}
.btn.clair{color:#fff;border-color:rgba(255,255,255,.4)}
.btn.clair:hover{border-color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── Sections ── */
.section{padding:96px 0}
.section.serre{padding:64px 0}
.section.carte{background:var(--card);border-block:1px solid var(--line)}
.section.marine{background:var(--navy);color:rgba(255,255,255,.8)}
.section.marine h2,.section.marine h3{color:#fff}
.section.marine .surtitre{color:var(--gold-light)}
.entete{max-width:760px;margin-bottom:48px}
.entete.centre{margin-inline:auto;text-align:center}
.entete.centre p{margin-inline:auto}
@media (max-width:620px){.section{padding:64px 0}.section.serre{padding:44px 0}}

/* ── Accueil : héros ── */
.heros{padding:76px 0 40px;background:radial-gradient(1100px 520px at 85% -10%,rgba(176,141,87,.16),transparent 60%),var(--paper)}
.heros .cadre{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.heros-texte{max-width:820px}
.heros .chapo{font-size:1.2rem}
.preuves{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font-size:.88rem;color:var(--mut);list-style:none}
.preuves li{display:flex;align-items:center;gap:8px}
.preuves li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* Fenêtre d'app (capture) */
.ecran{border-radius:14px;background:var(--card);box-shadow:0 40px 80px -40px rgba(23,40,58,.55),0 0 0 1px rgba(23,40,58,.08);overflow:hidden}
.ecran-barre{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;background:#ece5d8;border-bottom:1px solid var(--line)}
.ecran-barre i{width:10px;height:10px;border-radius:50%;background:#d6cbb8}
.ecran-barre b{margin-left:10px;font-size:.72rem;font-weight:500;color:var(--mut)}
.ecran img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
figure figcaption{font-size:.85rem;color:var(--mut);margin-top:12px}

/* ── Grilles et cartes ── */
.grille{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g3,.g2,.g4{grid-template-columns:minmax(0,1fr)}}
.bloc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--sh)}
.bloc h3{margin-bottom:10px}
.bloc p{font-size:.95rem}
.pic{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--bronze);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pic svg{width:22px;height:22px}
.lien-fleche{display:inline-block;margin-top:14px;font-size:.9rem;font-weight:500;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold)}
.lien-fleche:hover{color:var(--bronze)}

/* Moments (avant / pendant / après) */
.moments{counter-reset:m}
.moment{position:relative;padding-top:20px;border-top:1px solid var(--line)}
.moment::before{counter-increment:m;content:counter(m,decimal-leading-zero);font-family:var(--serif);font-size:.95rem;color:var(--bronze);display:block;margin-bottom:10px}
.moment ul{list-style:none;margin-top:12px;font-size:.93rem}
.moment li{padding:5px 0 5px 18px;position:relative}
.moment li::before{content:'';position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--gold)}

/* Rangée texte + capture */
.rangee{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.rangee:first-of-type{border-top:0;padding-top:0}
.rangee.inverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.rangee.inverse .rangee-texte{order:2}
.rangee-texte h3{font-size:1.65rem;margin-bottom:12px}
.rangee-texte ul{list-style:none;margin-top:16px}
.rangee-texte li{padding:7px 0 7px 26px;position:relative;font-size:.96rem}
.rangee-texte li::before{content:'';position:absolute;left:0;top:15px;width:14px;height:1px;background:var(--gold)}
@media (max-width:900px){.rangee,.rangee.inverse{grid-template-columns:minmax(0,1fr);gap:28px}.rangee.inverse .rangee-texte{order:0}}

/* Bandeau auteur */
.auteur{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.auteur-mono{width:84px;height:84px;border-radius:50%;background:var(--navy);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:2rem}
.auteur blockquote{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--ink);line-height:1.35;max-width:62ch}
.auteur cite{display:block;margin-top:12px;font-style:normal;font-size:.9rem;color:var(--mut)}
@media (max-width:620px){.auteur{grid-template-columns:minmax(0,1fr)}}

/* Chiffres */
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.chiffres div{border-left:1px solid rgba(176,141,87,.5);padding-left:18px}
.chiffres b{display:block;font-family:var(--serif);font-weight:400;font-size:2.3rem;color:#fff;line-height:1.1}
.chiffres span{font-size:.9rem}
@media (max-width:820px){.chiffres{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}

/* Sécurité */
.coffre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.coffre{grid-template-columns:minmax(0,1fr)}}
.schema{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;overflow-x:auto}
.schema svg{min-width:640px;width:100%;height:auto}
.note{background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:16px 20px;font-size:.95rem;color:var(--ink);margin-top:28px;max-width:none}
.note p{max-width:none}

/* Tarifs */
.offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:980px){.offres{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}}
.offre{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;box-shadow:var(--sh);position:relative}
.offre.vedette{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--sh)}
.offre .etiquette{position:absolute;top:-12px;left:28px;background:var(--gold);color:var(--ink);font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:999px;letter-spacing:.02em}
.offre h3{font-size:1.25rem}
.prix{margin:18px 0 6px;font-family:var(--serif);color:var(--ink);font-size:2.7rem;line-height:1}
.prix small{font-family:var(--sans);font-size:.9rem;color:var(--mut);margin-left:4px}
.offre .detail{font-size:.9rem;color:var(--mut);min-height:2.8em}
.offre ul{list-style:none;margin:20px 0 26px;font-size:.93rem;flex:1}
.offre li{padding:7px 0 7px 26px;position:relative;border-top:1px solid var(--line)}
.offre li:first-child{border-top:0}
.offre li::before{content:'';position:absolute;left:2px;top:15px;width:10px;height:6px;border-left:1.6px solid var(--ok);border-bottom:1.6px solid var(--ok);transform:rotate(-45deg)}
.offre .btn{width:100%}
.bandeau-offre{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--card);border:1px dashed var(--gold);border-radius:var(--r);padding:24px 28px;margin-top:24px}
.bandeau-offre h3{font-size:1.2rem;margin-bottom:4px}
@media (max-width:720px){.bandeau-offre{grid-template-columns:minmax(0,1fr)}}
.tableau{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tableau th,.tableau td{text-align:left;padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
.tableau thead th{border-top:0;background:var(--paper2);font-weight:600;color:var(--ink);font-size:.86rem}
.tableau td.r,.tableau th.r{text-align:right;white-space:nowrap}
.defile{overflow-x:auto;border-radius:var(--r)}

/* FAQ */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-family:var(--serif);font-size:1.18rem;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:14px;font-family:var(--sans);font-size:1.5rem;color:var(--bronze);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;font-size:.98rem}

/* Page intérieure */
.page-tete{padding:72px 0 44px;background:radial-gradient(900px 400px at 90% -20%,rgba(176,141,87,.14),transparent 60%),var(--paper)}
.fil{font-size:.82rem;color:var(--mut);margin-bottom:18px}
.fil a{text-decoration:none;border-bottom:1px solid var(--line)}
.texte h2{font-size:1.6rem;margin:40px 0 12px}
.texte h2:first-child{margin-top:0}
.texte p,.texte li{margin-bottom:12px}
.texte ul{padding-left:20px}

/* Contact */
.contact-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:720px){.contact-cartes{grid-template-columns:minmax(0,1fr)}}
.contact-carte{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--sh)}
.contact-carte a.gros{display:inline-block;margin-top:10px;font-family:var(--serif);font-size:1.45rem;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold);word-break:break-word}
.etapes{list-style:none;counter-reset:e;display:grid;gap:14px}
.etapes li{counter-increment:e;position:relative;padding-left:52px;min-height:36px}
.etapes li::before{content:counter(e);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);color:var(--bronze);font-family:var(--serif);display:flex;align-items:center;justify-content:center}

/* Appel final */
.appel{background:var(--navy);color:rgba(255,255,255,.8);border-radius:24px;padding:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.appel h2{color:#fff}
.appel h2 em{color:var(--gold-light)}
@media (max-width:820px){.appel{grid-template-columns:minmax(0,1fr);padding:36px 24px}}

/* ── Pied de page ── */
.pied{background:var(--ink);color:rgba(255,255,255,.62);padding:56px 0 36px;font-size:.88rem}
.pied-haut{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
.pied .marque span{font-size:1.35rem}
.pied p{margin-top:12px;max-width:42ch}
.pied h4{font-family:var(--sans);font-weight:600;color:#fff;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.pied ul{list-style:none}
.pied li{padding:4px 0}
.pied a{text-decoration:none}
.pied a:hover{color:#fff}
.pied-bas{padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.8rem}
@media (max-width:720px){.pied-haut{grid-template-columns:minmax(0,1fr)}}

/* Ressources (articles) */
.titre-article{font-size:clamp(2rem,4.2vw,3.1rem);max-width:22ch}
.signature-article{font-size:.88rem;color:var(--mut);margin-top:14px}
.article-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.article{max-width:72ch}
.article h2{font-size:1.55rem}
.article ul{padding-left:20px}
.article a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold)}
.article a:hover{color:var(--bronze)}
.article-cote{position:sticky;top:96px}
.liens-article{list-style:none;font-size:.95rem}
.liens-article li{padding:8px 0;border-top:1px solid var(--line)}
.liens-article li:first-child{border-top:0}
.liens-article a{text-decoration:none;color:var(--navy)}
.liens-article a:hover{color:var(--bronze)}
.carte-article{text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.carte-article:hover{border-color:var(--gold);transform:translateY(-2px)}
.carte-article p:not(.surtitre){flex:1}
@media (max-width:900px){.article-grille{grid-template-columns:minmax(0,1fr)}.article-cote{position:static}}
@media (max-width:1060px) and (min-width:901px){.liens{gap:20px}.liens a{font-size:.86rem}}