/* Cap & Plume — carnet de voyage : papier, encre marine, vermillon de cartographe.
   Refonte du 25/09/2026 : fond papier uni, une gravure en tête de page, le texte toujours sur du clair.
   (L'ancienne feuille, avec ses couches successives, est dans Projets securises/Cap et Plume/2026-09-25.) */

/* les polices sont déclarées dans polices/polices.css (hébergées sur le site, aucun appel à Google) */

:root{
  --papier:#f3ecdd; --papier-2:#e9dfc9; --encre:#15293c; --doux:#4a5866;
  --vermillon:#b5442a; --vermillon-fonce:#a33a22; --trait:#d3c8ae; --blanc:#fcf9f2;
  --indigo:#1b3f5e; --mer:#cfe0e6; --ambre:#c98b2e; --brun:#6d4527;
  --titre:"Libre Caslon Display",Georgia,serif; --texte:"Libre Caslon Text",Georgia,serif;
  --outil:"Work Sans",system-ui,sans-serif;
  --large:min(1600px,calc(100vw - 2 * var(--gouttiere))); --gouttiere:clamp(16px,5vw,72px); --haut-barre:72px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;overflow-x:clip;color:var(--encre);font:20px/1.65 var(--texte);
  /* le papier : un seul grain très léger, calculé par le navigateur (0 octet d'image) */
  background:var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* les pages intérieures : une carte marine très légère (lignes de cap d'un portulan) + un lavis de ciel et de mer.
   L'accueil n'en a pas besoin : il a sa mer. */
body:not([data-page=index])::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(img/fond-portulan.svg) center/cover no-repeat,
    radial-gradient(ellipse 70% 45% at 85% 0%,rgba(207,224,230,.55),transparent 70%),
    radial-gradient(ellipse 60% 40% at 0% 100%,rgba(201,139,46,.12),transparent 70%)}
::selection{background:var(--vermillon);color:var(--blanc)}
a{color:var(--vermillon-fonce);text-underline-offset:3px}
h1,h2,h3{font-family:var(--titre);font-weight:400;line-height:1.08;letter-spacing:-.012em;margin:0;text-wrap:balance}
p{text-wrap:pretty}
em{font-style:italic;color:var(--vermillon)}
img{max-width:100%;height:auto}
:focus-visible{outline:2px dashed var(--vermillon);outline-offset:4px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- en-tête : une vraie barre, toujours là, dont le bord du bas est un nuage (bosses irrégulières, ombre bleutée, trait d'encre) :
   elle se fond dans le ciel mais la séparation reste nette ---------- */
.barre{position:fixed;top:0;left:0;right:0;z-index:50;background:#f6efe1;transition:transform .3s ease}
.barre.cache{transform:translateY(calc(-100% - 36px))}
@media (prefers-reduced-motion:reduce){.barre{transition:none}}
.barre::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='30' viewBox='0 0 560 30'%3E%3Cpath d='M0 4 c3.0 17.6 71.0 17.6 74 0 c1.7 10.8 40.3 10.8 42 0 c3.8 23.0 92.2 23.0 96 0 c1.4 9.5 34.6 9.5 36 0 c2.6 16.2 63.4 16.2 66 0 c4.7 25.7 113.3 25.7 118 0 c1.9 12.2 46.1 12.2 48 0 c3.2 18.9 76.8 18.9 80 0 V0 H0Z' fill='%23c9dae3'/%3E%3Cpath d='M0 0 c3.0 17.6 71.0 17.6 74 0 c1.7 10.8 40.3 10.8 42 0 c3.8 23.0 92.2 23.0 96 0 c1.4 9.5 34.6 9.5 36 0 c2.6 16.2 63.4 16.2 66 0 c4.7 25.7 113.3 25.7 118 0 c1.9 12.2 46.1 12.2 48 0 c3.2 18.9 76.8 18.9 80 0 V0 H0Z' fill='%23f6efe1'/%3E%3Cpath d='M0 4 c3.0 17.6 71.0 17.6 74 0 c1.7 10.8 40.3 10.8 42 0 c3.8 23.0 92.2 23.0 96 0 c1.4 9.5 34.6 9.5 36 0 c2.6 16.2 63.4 16.2 66 0 c4.7 25.7 113.3 25.7 118 0 c1.9 12.2 46.1 12.2 48 0 c3.2 18.9 76.8 18.9 80 0' fill='none' stroke='%2315293c' stroke-opacity='.5' stroke-width='1.3'/%3E%3C/svg%3E") 0 0/560px 30px repeat-x;filter:drop-shadow(0 5px 6px rgba(21,41,60,.12))}
main{padding-top:var(--haut-barre)}
main.accueil{padding-top:0}
/* accueil : la barre est là à l'arrivée, elle s'efface dès que la traversée commence */
body[data-page=index] .barre{transition:opacity .35s ease,visibility .35s}
body.scene-finie .barre{opacity:0;visibility:hidden;pointer-events:none}
/* le pied de page de l'accueil : une seule ligne légale */
.pied-mini{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.4rem;padding:.9rem var(--gouttiere);font-family:var(--outil);font-size:.95rem;color:var(--doux);border-top:1px solid var(--trait)}
.pied-mini nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.pied-mini a{color:var(--doux);text-decoration:none}
.pied-mini a:hover{color:var(--vermillon-fonce)}

/* ---------- le ciel des pages intérieures (fixe : on y lit du texte) ---------- */
/* un bandeau d'horizon : la barre se pose dessus, il se fond dans le papier avant le contenu (texte et formulaires restent sur du clair) */
.ciel{position:absolute;top:0;left:0;right:0;height:clamp(200px,26vh,240px);z-index:-1;pointer-events:none;
  background:url(img/bandeau-nuages.webp) center -120px/auto 720px repeat-x;
  -webkit-mask-image:linear-gradient(#000 42%,transparent);mask-image:linear-gradient(#000 42%,transparent)}
main:not(.accueil){padding-top:calc(var(--haut-barre) + clamp(1.5rem,5vh,3.5rem))}
.barre-in{max-width:var(--large);margin:auto;padding:.8rem var(--gouttiere);display:flex;align-items:center;gap:1rem 2rem}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--encre);text-decoration:none;font-family:var(--titre);font-size:1.45rem;line-height:1;flex:none}
.logo i{font-style:italic;color:var(--vermillon)}
.logo .rose{position:relative;width:40px;height:40px;flex:none}
.logo .rose img{position:absolute;inset:0;width:100%;height:100%}
.logo .rose .aiguille{transform-origin:50% 50%;transition:transform .4s ease-out}
.barre nav{margin-left:auto;display:flex;align-items:center;gap:.3rem 1.8rem;flex-wrap:wrap;font-family:var(--outil);font-size:1.05rem}
.barre nav a{color:var(--encre);text-decoration:none;padding:.3rem 0;border-bottom:1px solid transparent}
.barre nav a:hover,.barre nav a[aria-current=page]{border-color:var(--vermillon)}
.barre nav a.mini{border:1px solid var(--encre);border-radius:2px;padding:.5rem 1rem;background:var(--encre);color:var(--blanc)}
.barre nav a.mini:hover{background:var(--vermillon);border-color:var(--vermillon)}
.barre nav a.mini[aria-current=page]{box-shadow:0 3px 0 var(--vermillon)}
@media (max-width:640px){
  :root{--haut-barre:104px}
  .barre-in{flex-wrap:wrap;gap:.4rem 1rem;padding-block:.6rem}
  .logo{font-size:1.25rem}.logo .rose{width:34px;height:34px}
  .barre nav{margin-left:0;width:100%;justify-content:space-between;gap:.2rem .8rem;font-size:.95rem}
  .barre nav a.mini{padding:.4rem .7rem}
  .barre nav a{padding:.65rem 0;min-height:44px;display:inline-flex;align-items:center}
  .barre nav a.mini{padding:.55rem .9rem}
}

main{max-width:calc(var(--large) + 2 * var(--gouttiere));margin:auto;padding:0 var(--gouttiere)}

/* ---------- petits éléments communs ---------- */
.sur{font-family:var(--outil);text-transform:uppercase;letter-spacing:.14em;font-size:.88rem;color:var(--vermillon-fonce);font-weight:500;display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1rem}
.sur::before{content:"";width:30px;height:1px;background:currentColor}
.chapo{font-size:clamp(1.22rem,1.7vw,1.5rem);color:var(--doux);max-width:34em;margin:1.2rem 0 1.8rem}
.actions{display:flex;align-items:center;gap:1rem 1.8rem;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--outil);font-weight:500;letter-spacing:.02em;background:var(--encre);color:var(--blanc);
  padding:.95rem 1.7rem;text-decoration:none;border:1px solid var(--encre);border-radius:2px;cursor:pointer;font-size:1rem;
  transition:background .2s,border-color .2s,transform .2s}
.btn:hover{background:var(--vermillon);border-color:var(--vermillon);transform:translateY(-2px)}
.btn.off{background:transparent;color:var(--doux);border-color:var(--trait);cursor:default;transform:none}
.lien-fleche{font-family:var(--outil);font-weight:500;color:var(--encre);text-decoration:none;border-bottom:1px solid var(--vermillon);padding-bottom:3px}
.lien-fleche:hover{color:var(--vermillon-fonce)}
.note{font-family:var(--outil);font-size:.95rem;line-height:1.6;color:var(--doux);margin-top:1.4rem;max-width:46em}

/* ---------- la tête de page : une gravure qui se fond dans le papier ---------- */
.tete{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;
  padding:clamp(2rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem)}
.tete h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.gravure{margin:0;position:relative;mix-blend-mode:multiply}   /* sur la figure : l'effet de profondeur (transform) l'isolerait sinon */
.gravure img{display:block;width:100%;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 58%,transparent 100%)}
@media (max-width:900px){
  .tete{grid-template-columns:1fr;padding-top:1.2rem}
  .tete .gravure{order:-1;max-width:420px;margin:0 auto -1rem;width:100%}
}

/* ---------- la mer vivante d'une tête de page (js/mer.js) ---------- */
.mer-vivante{position:relative;margin:0;aspect-ratio:16/11;display:flex;align-items:flex-end;justify-content:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,#000 72%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,#000 72%,transparent);mask-composite:intersect}
.mer-vivante{background:url(img/escales/mer-bande.webp) center 100%/auto 46% repeat-x}
.mer-vivante img{position:relative;width:78%;height:auto;margin-bottom:12%;filter:drop-shadow(0 10px 12px rgba(21,41,60,.2))}
.mer-vivante.vivante{background:none}
.mer-vivante .mer-toile{position:absolute;inset:0;animation:mer-apparait .8s ease both}
@keyframes mer-apparait{from{opacity:0}}
.mer-vivante .mer-toile canvas{display:block;width:100%;height:100%}
.mer-vivante.vivante img{display:none}
@media (max-width:900px){.tete .mer-vivante{order:-1;width:100%;max-width:520px;margin:0 auto -1rem}}

/* ---------- sections : titre à gauche, contenu à droite ---------- */
.bloc{padding:clamp(2.6rem,5vw,4.5rem) 0;border-top:1px solid var(--trait);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1rem clamp(2rem,5vw,4.5rem)}
.bloc>h2{font-size:clamp(1.8rem,3.2vw,2.6rem);align-self:start}
.bloc>h2 small{display:block;font-family:var(--outil);font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);margin-bottom:.9rem}
.bloc>*:not(h2){grid-column:2}
.bloc>p{max-width:36em;margin:0 0 1rem;font-size:1.2rem}
@media (min-width:901px){.bloc>h2{position:sticky;top:calc(var(--haut-barre) + 24px)}}
@media (max-width:900px){.bloc{grid-template-columns:1fr;padding-block:2.2rem}.bloc>*:not(h2){grid-column:1}.modules li{padding:.7rem 0}.modules b{font-size:1.15rem}.modules span{font-size:.95rem}.offre ul{margin-bottom:.6rem}.prix{font-size:2.6rem;margin:.6rem 0 .8rem}}

/* ---------- étapes numérotées ---------- */
.modules{list-style:none;margin:0;padding:0;counter-reset:m}
.modules li{counter-increment:m;display:grid;grid-template-columns:3.2rem 1fr;column-gap:1.1rem;padding:1rem 0;border-bottom:1px dashed var(--trait)}
.modules li:first-child{padding-top:0}
.modules li::before{content:counter(m,decimal-leading-zero);grid-row:span 2;font-family:var(--titre);font-style:italic;font-size:1.8rem;line-height:.95;color:var(--vermillon)}
.modules b{font-family:var(--titre);font-weight:400;font-size:1.5rem;line-height:1.25}
.modules span{color:var(--doux)}

/* ---------- tarifs : des cartouches gravés (double filet d'encre, prix entre deux traits, pastille en tête) ---------- */
.offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.2rem,2.4vw,2rem);align-items:stretch}
.offre{position:relative;display:flex;flex-direction:column;text-align:center;background:var(--blanc);border:1px solid var(--encre);
  box-shadow:inset 0 0 0 5px var(--blanc),inset 0 0 0 6px rgba(21,41,60,.35),0 16px 30px -26px rgba(28,42,56,.7);padding:2rem 1.5rem 1.6rem}
.offre::before{content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;transform:rotate(45deg);
  background:var(--blanc);border:1px solid var(--encre)}
.offre.forte{border-color:var(--vermillon);box-shadow:inset 0 0 0 5px var(--blanc),inset 0 0 0 6px rgba(181,68,42,.5),0 22px 36px -24px rgba(120,40,20,.45)}
.offre.forte::before{background:var(--vermillon);border-color:var(--vermillon)}
.offre h3{font-size:1.5rem}
.prix{display:flex;align-items:baseline;justify-content:center;gap:.5rem;font-family:var(--titre);font-size:2.9rem;line-height:1;margin:.9rem 0 1.1rem;font-variant-numeric:tabular-nums}
.prix::before,.prix::after{content:"";flex:1;max-width:48px;height:1px;background:var(--trait);align-self:center}
.prix small{font-family:var(--outil);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
.offre ul{list-style:none;padding:0;margin:0 0 1.2rem;color:var(--doux);font-size:1.08rem;text-align:left}
.offre li{padding:.28rem 0 .28rem 1.3rem;position:relative}
.offre li::before{content:"";position:absolute;left:0;top:1em;width:.7rem;height:1px;background:var(--vermillon)}
.offre .btn,.offre .renonce{margin-top:auto}
.renonce{display:block;font-family:var(--outil);font-size:.95rem;line-height:1.55;color:var(--doux);margin:0 0 .9rem;text-align:left}
.renonce+.btn{margin-top:0}
.renonce.alerte{color:var(--vermillon-fonce);font-weight:600}
/* le sceau de cire posé sur l'offre recommandée */
.sceau{position:absolute;right:-18px;top:-22px;width:76px;height:auto;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(80,20,10,.35))}
@media (max-width:900px){.sceau{right:8px;top:-24px;width:66px}}

/* ---------- réalisations : trois vrais sites ---------- */
.reals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem)}
.real{position:relative;margin:0}
.real .vignette{display:block;background:var(--blanc);padding:8px 8px 30px;box-shadow:0 1px 2px rgba(28,42,56,.12),0 16px 34px -18px rgba(28,42,56,.45);transform:rotate(-1deg);transition:transform .35s}
.real:nth-child(2) .vignette{transform:rotate(.8deg)}
.real a.vignette:hover{transform:rotate(0) translateY(-4px)}
.real .vignette img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.real h3{font-size:1.35rem;margin:1.2rem 0 .3rem}
.real p{color:var(--doux);margin:0;font-size:1.08rem}
.tampon{position:absolute;right:-14px;top:-22px;width:92px;height:auto;pointer-events:none;mix-blend-mode:multiply;transform:rotate(-12deg)}
@media (max-width:900px){
  /* téléphone : les réalisations en carrousel, on les fait glisser du doigt */
  .reals{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 14px 10px 4px;gap:1.2rem;min-width:0}
  .real{scroll-snap-align:start}
  .tampon{right:-4px;top:-18px;width:70px}
}

/* ---------- questions ---------- */
details{border-bottom:1px solid var(--trait);padding:1rem 0}
summary{cursor:pointer;font-family:var(--titre);font-size:1.45rem;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--vermillon);font-family:var(--outil);font-size:1.2rem;flex:none}
details[open] summary::after{content:"–"}
details p{color:var(--doux);margin:.6rem 0 0;max-width:42em}

/* ---------- appel final ---------- */
.appel{text-align:center;padding:clamp(3rem,6vw,5rem) 0;border-top:1px solid var(--encre)}
.appel h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:1rem}
.appel p{color:var(--doux);margin:0 auto 1.8rem;max-width:32em}

/* ---------- les deux portes ---------- */
.portes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
.porte{display:block;padding:clamp(1.8rem,3.5vw,3rem) clamp(1.8rem,3.5vw,3rem) clamp(1.8rem,3.5vw,3rem) 0;color:var(--encre);text-decoration:none;position:relative;overflow:hidden}
.porte+.porte{padding-left:clamp(1.8rem,3.5vw,3rem);padding-right:0;border-left:1px solid var(--encre)}
.porte::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--vermillon);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.porte:hover::after{transform:scaleX(1)}
.porte h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:.2rem 0 .7rem;transition:transform .3s}
.porte:hover h2{transform:translateX(8px)}
.porte p{color:var(--doux);max-width:26em;margin:0 0 1rem}
.fleche{font-family:var(--outil);font-weight:500;font-size:.95rem;border-bottom:1px solid var(--vermillon);padding-bottom:3px}
@media (max-width:700px){.portes{grid-template-columns:1fr 1fr}.porte,.porte+.porte{padding:1.1rem .8rem 1.1rem 0;border-left:0}.porte+.porte{padding-left:.8rem;border-left:1px solid var(--encre)}.porte .sur{margin-bottom:.3rem;font-size:.62rem;letter-spacing:.12em}.porte .sur::before{display:none}.porte p{display:none}.porte h2{font-size:1.5rem}.fleche{font-size:.85rem}.porte h2{margin-bottom:.4rem}}

/* ---------- la signature de l'accueil ---------- */
.signature{padding:clamp(1.6rem,4vw,3.4rem) 0 0;text-align:center}
.signature p{max-width:36em;margin:0 auto;font-family:var(--titre);font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--doux)}
.signature b{font-weight:400;font-style:italic;color:var(--vermillon-fonce)}

/* ---------- formulaire ---------- */
.form{max-width:34em}
.form label{display:block;font-family:var(--outil);font-size:1.02rem;font-weight:500;color:var(--encre);margin:0 0 1.4rem}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:.4rem;padding:.6rem 0;font:1.2rem var(--texte);color:var(--encre);background:transparent;border:0;border-bottom:1px solid var(--encre);border-radius:0}
.form input,.form select,.form textarea{padding-inline:.5rem;border-bottom-width:2px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--vermillon);outline-offset:2px;background-color:var(--blanc)}
.piege{position:absolute;left:-9999px}
p.alerte{color:var(--vermillon-fonce);font-weight:600}
.aide-champ{display:block;margin-top:.35rem;font-size:.98rem;font-weight:500;color:var(--vermillon-fonce)}
.aide-champ:empty{display:none}
.a-corriger input,.a-corriger textarea{border-bottom-color:var(--vermillon);background-color:#fbeee9}

/* ---------- contact : le phare à côté du formulaire ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(1.5rem,4vw,3rem) 3rem}
.contact h1{font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:.4rem}
.contact .apres{list-style:none;padding:0;margin:0 0 1.8rem;font-family:var(--outil);font-size:.92rem;color:var(--doux)}
.contact .apres li{padding:.2rem 0 .2rem 1.3rem;position:relative}
.contact .apres li::before{content:"";position:absolute;left:0;top:.85em;width:.7rem;height:1px;background:var(--vermillon)}
figure.phare{margin:0;position:relative;width:100%}
/* sans script : l'illustration du phare allumé ; avec js/phare.js, le phare vivant (éteint qui s'allume, faisceau qui tourne, mer, écume) */
figure.phare .eteint{display:none}
.phare-toile{position:absolute;inset:0;animation:phare-apparait .5s ease both;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%)}
@keyframes phare-apparait{from{opacity:0}}
.phare-toile canvas{display:block;width:100%;height:100%}
figure.phare.vivant .allume{visibility:hidden}
figure.phare img{display:block;width:100%;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%)}
@media (max-width:900px){.contact{grid-template-columns:1fr;align-items:start}figure.phare{max-width:300px;width:100%;margin:0 auto -1rem}}

/* ---------- pages d'information (mentions, CGV…) : courtes, en fiches ---------- */
.info{max-width:calc(980px + 2 * var(--gouttiere));margin:auto;padding-block:clamp(1.8rem,4vw,3rem) 2rem}
.info h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:.6rem}
.info .chapo{margin:.4rem 0 1.6rem}
.essentiel{background:var(--blanc);border-left:3px solid var(--vermillon);padding:1.1rem 1.4rem;margin:0 0 2rem;font-size:1.12rem}
.essentiel b{font-family:var(--outil);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vermillon-fonce);display:block;margin-bottom:.35rem;font-weight:500}
.essentiel ul{margin:0;padding-left:1.1rem}
.essentiel li{margin:.15rem 0}
.fiches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.4rem}
.fiche{padding:1rem 0;border-top:1px solid var(--trait)}
.fiche h2{font-family:var(--outil);font-weight:600;font-size:1.05rem;letter-spacing:.02em;margin:0 0 .3rem;color:var(--encre)}
.fiche p{margin:0;color:var(--doux);font-size:1.08rem;line-height:1.6}
.fiche p+p{margin-top:.5rem}
@media (max-width:760px){.fiches{grid-template-columns:1fr}}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--encre);max-width:var(--large);margin:3rem auto 0;padding:2.4rem var(--gouttiere) 2rem;
  display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem 2rem;font-family:var(--outil);font-size:1rem;color:var(--doux)}
.pied h2{font-family:var(--outil);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre);margin:0 0 .8rem;font-weight:500}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:.3rem 0}
.pied a{color:var(--doux);text-decoration:none}
.pied a:hover{color:var(--vermillon-fonce)}
.pied .devise{font-family:var(--titre);font-style:italic;font-size:1.3rem;color:var(--encre);margin:0 0 .5rem}
.pied .bas{grid-column:1/-1;border-top:1px solid var(--trait);padding-top:1rem;margin:0;font-size:.9rem}
@media (max-width:700px){.pied{grid-template-columns:1fr}}

/* ---------- grands écrans : on prend la place. Deux sections côte à côte quand la largeur le permet ---------- */
.paire{display:block}
@media (min-width:1680px){
  .paire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(3rem,5vw,6rem);border-top:1px solid var(--trait);align-items:start}
  .paire>.bloc{grid-template-columns:1fr;border-top:0;padding-block:clamp(2.4rem,4vw,3.6rem)}
  .paire>.bloc>*:not(h2){grid-column:1}
  .paire>.bloc>h2{position:static;margin-bottom:.6rem}
  .paire>.bloc#faq>h2{grid-row:auto}
  .paire .offres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .paire .livre-bord{grid-template-columns:1fr 1fr}
  .tete{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .tete .gravure,.tete .mer-vivante{max-width:820px;justify-self:end;width:100%}
}



/* ---------- variété : une échelle de tailles franche, l'écriture à la main pour les annotations, des bandes de couleur ---------- */
:root{--main:"Caveat",cursive}
.note{font-size:.92rem}
.real h3{font-size:clamp(1.6rem,2.2vw,2rem);margin:1.1rem 0 .25rem}
.real p{font-size:1.08rem;line-height:1.55}
.contact .apres{font-family:var(--texte);font-size:1.28rem;color:var(--encre)}
.contact .apres li{padding:.3rem 0 .3rem 1.5rem}
.contact .form .note{font-size:.9rem}
.annotation{font-family:var(--main);font-weight:500;font-size:1.55rem;line-height:1.1;color:var(--vermillon-fonce);display:inline-block;transform:rotate(-3deg)}
/* une bande pleine largeur, pour changer de papier d'une section à l'autre */
.bande{position:relative;isolation:isolate}
.bande::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:var(--fond-bande,#e9dfc9)}
.bande-mer{--fond-bande:#e3edf0}
.bande-papier{--fond-bande:#ece3cf}
.bande>.bloc,.bande.paire{border-top:0}

/* tarifs à côté des questions : des cartes plus serrées, le sceau dans le coin haut */
@media (min-width:1680px){
  .paire .offre{padding:2rem 1rem 1.4rem}
  .paire .offre h3{font-size:1.35rem;padding-right:0}
  .paire .prix{font-size:clamp(2rem,2.3vw,2.8rem);gap:.3rem}
  .paire .prix::before,.paire .prix::after{max-width:22px}
  .paire .offre ul{font-size:1.02rem}
  .paire .sceau{right:-12px;top:-18px;width:64px}
}

/* les mentions restent petites, même dans une section */
.bloc>p.note,.tresor .note{font-size:.92rem;line-height:1.6}
/* grands écrans : la scène de tête prend plus de place que le texte (indépendant des paires, qui attendent 1680 px) */
@media (min-width:1360px){
  .tete{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .tete .gravure,.tete .mer-vivante{max-width:820px;justify-self:end;width:100%}
}

/* ---------- accueil : la page ne défile pas ; les mentions légales sont une bande de sable au pied de la scène ----------
   img/sable.webp : texture granuleuse raccordable. Pas de bord net : la lisière (img/sable-lisiere.png, masque de bruit)
   fait se dissoudre le sable dans la mer, grain par grain, avec du sable mouillé plus sombre et une écume trouée qui s'efface. */
.pied-mini{position:relative;border-top:0;color:#2a1c08;font-weight:500;padding-top:.4rem;padding-bottom:.45rem;
  background:linear-gradient(rgba(110,80,36,.16),rgba(110,80,36,0) 60%),url(img/sable.webp) 0 0/300px 300px;text-shadow:0 0 6px rgba(248,238,212,.95),0 0 2px rgba(248,238,212,.9)}
.pied-mini::before,.pied-mini::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:52px;margin-bottom:-2px;pointer-events:none}
.pied-mini::before{background:linear-gradient(rgba(96,70,32,.42),rgba(110,80,36,.16)),url(img/sable.webp) 0 100%/300px 300px;
  -webkit-mask:url(img/sable-lisiere.png) 0 0/900px 52px repeat-x;mask:url(img/sable-lisiere.png) 0 0/900px 52px repeat-x}
.pied-mini::after{background:url(img/ecume.png) 0 0/900px 52px repeat-x;opacity:.9}
.pied-mini a{color:#2a1c08}
.pied-mini a:hover{color:var(--vermillon-fonce)}
body[data-page=index]:has(.flotte.vivante){height:100vh;overflow:hidden}
body[data-page=index]:has(.flotte.vivante) .pied-mini{position:fixed;left:0;right:0;bottom:0;z-index:4}
@media (max-width:700px){
  body[data-page=index]:has(.flotte.vivante) .pied-mini{font-size:.8rem;padding:.45rem 4vw;gap:.1rem .9rem}
  body[data-page=index]:has(.flotte.vivante) .pied-mini>span{display:none}
  body[data-page=index]:has(.flotte.vivante) .pied-mini nav{gap:.15rem .9rem;justify-content:center;width:100%}
}