/* Cap & Plume — ce que les animations ajoutent à la page (js/escales.js),
   et les blocs propres à certaines pages. Tout reste lisible sans script. */

/* Le titre qui s'écrit ligne à ligne */
h1 .ligne{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
h1 .ligne>span{display:inline-block}

/* Créer mon site : les quatre atouts */
.atouts{list-style:none;margin:0;padding:1.4rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem;border-top:1px solid var(--encre)}
.atouts svg{width:40px;height:40px;fill:none;stroke:var(--vermillon);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.5rem}
.atouts b{display:block;font-family:var(--titre);font-weight:400;font-size:1.3rem;line-height:1.2;margin-bottom:.2rem}
.atouts span{color:var(--doux);font-size:1.08rem}
@media (max-width:560px){.atouts{gap:1.1rem 1rem}.atouts b{font-size:1.1rem}.atouts span{font-size:.9rem}.atouts svg{width:32px;height:32px}}

/* Créer mon site : la route de la méthode */
.route-methode{position:relative}
.route-svg{display:block;width:100%;height:auto;overflow:visible}
.route-fond{fill:none;stroke:var(--trait);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.route-encre{fill:none;stroke:none}                                  /* sert seulement de chemin au voilier */
/* le filet d'eau : une bande de mer claire, deux lignes de vagues qui filent */
.route-eau{fill:none;stroke:#bcd6e2;stroke-width:18;stroke-linecap:round;opacity:.85}
.route-vague{fill:none;stroke:#1b3f5e;stroke-opacity:.45;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:14 12}
.route-vague.v2{stroke:#fcf9f2;stroke-opacity:.9;stroke-dasharray:6 18}
@media (prefers-reduced-motion:no-preference){
  .route-vague{animation:vague-file 2.8s linear infinite}
  .route-vague.v2{animation-duration:4.2s}
  @keyframes vague-file{to{stroke-dashoffset:-52}}
}
.ports circle{fill:var(--blanc);stroke:var(--encre);stroke-width:2;transition:fill .4s}
.ports circle.atteint{fill:var(--vermillon);stroke:var(--vermillon)}
.escales-methode{list-style:none;margin:.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.escales-methode li{transition:opacity .5s}
.escales-methode b{display:block;font-family:var(--titre);font-weight:400;font-size:1.3rem;line-height:1.2}
.escales-methode small{display:block;font-family:var(--outil);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vermillon-fonce);margin:.2rem 0 .4rem}
.escales-methode span{color:var(--doux);font-size:.97rem}
.escales .route-methode .escales-methode li{opacity:.6}
.escales .route-methode .escales-methode li.atteint{opacity:1}
@media (max-width:900px){
  .route-svg{display:none}
  .escales-methode{grid-template-columns:1fr;gap:0;border-left:2px dashed var(--trait);margin-left:.4rem}
  .escales-methode li{padding:0 0 1.2rem 1.4rem;position:relative}
  .escales-methode li::before{content:"";position:absolute;left:-8px;top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--vermillon)}
  .escales .route-methode .escales-methode li{opacity:1;transition:none}
}

/* Se former : le fil d'encre du programme */
.modules.au-fil{position:relative}
.modules.au-fil .fil-encre{position:absolute;left:1.05rem;top:.4rem;bottom:1.4rem;width:2px;background:var(--vermillon);transform-origin:top;opacity:.5}
.modules.au-fil li::before{transition:color .4s,transform .4s;color:var(--trait)}
.modules.au-fil li.atteint::before{color:var(--vermillon);transform:scale(1.08)}

/* Se former : la frise du parcours (une route qui se trace, cinq ports) */
.parcours{--trace:1;list-style:none;margin:0;padding:1.6rem 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;position:relative}
.parcours::before{content:"";position:absolute;left:6px;right:6px;top:calc(1.6rem + 6px);height:2px;
  background:linear-gradient(90deg,var(--vermillon) calc(var(--trace) * 100%),var(--trait) 0);opacity:.8}
.parcours li{position:relative;padding-top:1.4rem}
.parcours li::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--blanc);border:2px solid var(--vermillon)}
.parcours li:last-child::before{background:var(--vermillon)}
.parcours b{display:block;font-family:var(--titre);font-weight:400;font-size:1.4rem;line-height:1.2;margin-bottom:.25rem}
.parcours span{color:var(--doux);font-size:1.06rem;line-height:1.5;display:block}
@media (max-width:900px){
  .parcours{grid-template-columns:1fr;gap:0;padding:0 0 0 1.6rem}
  .parcours::before{left:6px;right:auto;top:6px;bottom:6px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--vermillon) calc(var(--trace) * 100%),var(--trait) 0)}
  .parcours li{padding:0 0 1.1rem}
  .parcours li::before{left:calc(-1.6rem - 0px);top:.35rem}
}

/* Se former : le trésor. Le coffre au centre ; en s'ouvrant, il libère les deux guides. */
.tresor{text-align:center;padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(2.5rem,5vw,4rem);border-top:1px solid var(--trait)}
.tresor .sur{justify-content:center}
.tresor h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:0 0 .4rem}
.coffre-illu{position:relative;width:min(340px,70%);margin:0 auto 1.4rem;z-index:0}
.coffre-illu img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 16px rgba(40,26,10,.22))}
.coffre-illu .ferme{display:none}                       /* sans animation : le coffre est ouvert */
.escales .coffre-illu .ferme{display:block}
.escales .coffre-illu .ouvert{position:absolute;inset:0;opacity:0}
.coffre-illu .lueur{position:absolute;left:25%;top:18%;width:50%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,246,220,1) 0%,rgba(255,226,150,.85) 30%,rgba(247,195,90,.35) 55%,rgba(247,195,90,0) 72%)}
.tresor .offres{position:relative;z-index:1;max-width:860px;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr))}
.tresor .note{margin:1.4rem auto 0;text-align:center}
@media (max-width:700px){.tresor .offres{grid-template-columns:1fr}.coffre-illu{width:min(240px,70%);margin-bottom:1rem}}

/* Contact : la lumière du phare se pose sur l'illustration */
.phare-lumiere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.phare-lumiere .faisceau-droit{opacity:0}

/* Contact : le trait sous les champs s'écrit à l'encre quand on les remplit */
.form input,.form select,.form textarea{background-image:linear-gradient(var(--vermillon),var(--vermillon));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .5s cubic-bezier(.2,.8,.2,1)}
.form input:focus,.form select:focus,.form textarea:focus{background-size:100% 2px}

@media (prefers-reduced-motion:reduce){
  .form input,.form select,.form textarea{transition:none}
  .modules.au-fil li::before{transition:none}
  .real a.vignette,.porte::after,.porte h2,.btn{transition:none}
}

/* Se former : une main écrit à la plume sur la feuille vierge */
.gravure.ecriture svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.manuscrit{font-family:"Caveat",cursive;font-weight:500;font-size:34px;fill:#1b3f5e;fill-opacity:.92}
.main-f{transform:translate(884px,580px) rotate(8deg)}          /* sans animation : la main repose, le texte est déjà écrit */

/* Créer mon site : les promesses, en notes de livre de bord (numéro romain dans la marge, lignes réglées) */
.livre-bord{list-style:none;margin:0;padding:0;counter-reset:bord;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.4rem;border-top:1px solid var(--encre)}
.livre-bord li{counter-increment:bord;position:relative;padding:1.1rem 0 1.2rem 3.6rem;
  background:linear-gradient(var(--trait),var(--trait)) 3rem 0/1px 100% no-repeat,
             repeating-linear-gradient(transparent 0 31px,rgba(27,63,94,.12) 31px 32px)}
.livre-bord li::before{content:counter(bord,upper-roman);position:absolute;left:0;top:.9rem;width:2.4rem;text-align:right;
  font-family:var(--titre);font-style:italic;font-size:1.7rem;line-height:1;color:var(--vermillon)}
.livre-bord li::after{content:"";position:absolute;left:3.6rem;right:0;bottom:0;height:1px;background:var(--encre);opacity:.35;transform-origin:left;transform:scaleX(var(--trait-note,1))}
.livre-bord b{display:block;font-family:var(--titre);font-weight:400;font-size:1.55rem;line-height:1.25;margin-bottom:.25rem}
.livre-bord span{color:var(--doux);font-size:1.1rem;line-height:1.6}
@media (max-width:760px){.livre-bord{grid-template-columns:1fr}}

/* les questions, en carnet : chaque question numérotée dans la marge, la réponse notée en retrait */
#faq{counter-reset:q}
@media (min-width:901px){#faq{row-gap:0}#faq>h2{grid-row:1 / span 8}}   /* le titre sur 2 lignes n'étire plus la 1re question */
#faq details{counter-increment:q;position:relative;padding:1rem 0 1rem 3rem;border-bottom:1px dashed var(--trait)}
#faq details::before{content:"Q" counter(q);position:absolute;left:0;top:.75rem;font-family:"Caveat",cursive;font-weight:500;font-size:1.6rem;color:var(--vermillon)}
#faq details[open]{background:repeating-linear-gradient(transparent 0 29px,rgba(27,63,94,.08) 29px 30px)}
#faq details p{border-left:1px solid var(--trait);padding-left:1rem}
.bloc#faq{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.bloc#faq+.appel{padding-top:clamp(2rem,4vw,3rem)}

/* Se former : le guide est une page de carnet, le pack une boîte à outils ; chacun coiffé de son objet */
.tresor .offres{margin-top:4.5rem;row-gap:5rem}
.tresor .offre{padding-top:5.2rem}
.tresor .offre .objet{position:absolute;left:50%;top:-4.2rem;width:128px;height:auto;transform:translateX(-50%) rotate(-4deg);
  filter:drop-shadow(0 10px 10px rgba(40,26,10,.28));pointer-events:none}
.tresor .offre.boite .objet{transform:translateX(-50%) rotate(3deg);width:140px}
.tresor .offre::before{display:none}
.offre.carnet{background:
  linear-gradient(90deg,transparent 2.1rem,rgba(181,68,42,.45) 2.1rem 2.2rem,transparent 2.2rem),
  repeating-linear-gradient(transparent 0 29px,rgba(27,63,94,.13) 29px 30px) 0 4.6rem/100% calc(100% - 4.6rem) no-repeat,var(--blanc)}
.offre.boite{border-color:var(--brun);box-shadow:inset 0 0 0 5px var(--blanc),inset 0 0 0 6px rgba(109,69,39,.5),0 22px 36px -24px rgba(80,50,20,.45);
  background:linear-gradient(#8b5a33,#6d4527) top/100% 10px no-repeat,var(--blanc)}

/* Créer mon site : le chantier naval. Le navire se construit en 4 étapes, chacune = une étape de votre site */
.chantier{margin:0}
.chantier-vue{position:relative;aspect-ratio:1672/941;overflow:hidden;border:1px solid var(--encre);
  box-shadow:0 0 0 6px var(--blanc),0 0 0 7px var(--trait),0 26px 40px -26px rgba(21,41,60,.55)}
.chantier .etape-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.chantier .etape-img[data-e="4"]{opacity:1}              /* sans animation : le navire terminé */
.escales .chantier .etape-img[data-e="4"]{opacity:0}
.etapes-chantier{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.etapes-chantier li{border-top:3px solid var(--trait);padding-top:.6rem;transition:border-color .4s,opacity .4s}
.escales .etapes-chantier li{opacity:.75}
.escales .etapes-chantier li.fait{opacity:1;border-color:var(--vermillon)}
.etapes-chantier b{display:block;font-family:var(--titre);font-weight:400;font-size:1.45rem;line-height:1.2}
.etapes-chantier small{display:block;font-family:"Caveat",cursive;font-size:1.45rem;color:var(--vermillon-fonce);line-height:1.1}
.etapes-chantier span{display:block;font-size:1.02rem;color:var(--doux);line-height:1.45;margin-top:.2rem}
/* on passe d'une étape à l'autre en cliquant sur l'image, ou directement sur une étape */
.escales .chantier-vue{cursor:pointer}
.escales .chantier-vue::after{content:"Cliquez pour l’étape suivante →";position:absolute;right:10px;bottom:10px;padding:.3rem .7rem;
  font-family:var(--outil);font-size:.85rem;color:var(--encre);background:rgba(252,249,242,.9);border:1px solid var(--trait);pointer-events:none}
.escales .etapes-chantier li{cursor:pointer}
.escales .etapes-chantier li:hover{border-color:var(--ambre)}
@media (max-width:700px){.etapes-chantier{grid-template-columns:1fr 1fr}}

/* Se former : le programme est une traversée. Neuf escales en serpentin sur la bande bleue ;
   le petit voilier suit le filet d'eau au défilement et allume chaque module en y arrivant. (Sans animation : une liste simple.) */
.programme{grid-template-columns:1fr}
.programme>*:not(h2){grid-column:1}
.bloc.programme>h2{position:static}
.programme .annotation{margin:.2rem 0 1rem}
.traversee{position:relative}
.traversee svg.route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.traversee .route-eau{stroke:#c3dae3;stroke-width:22;opacity:1}
.traversee .ports circle{r:9px}
.traversee .route-voilier{filter:drop-shadow(0 4px 3px rgba(21,41,60,.25))}
.escales .traversee{--bord:clamp(44px,6vw,96px);padding:2.4rem var(--bord) 1rem}
.escales .traversee .modules{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.6rem clamp(2rem,5vw,5.5rem)}
.escales .traversee.epingle{padding-top:1.6rem;padding-bottom:.4rem}
.escales .traversee.epingle .modules{row-gap:2.6rem}
.escales .traversee .modules li:nth-child(4){grid-area:2/3}
.escales .traversee .modules li:nth-child(5){grid-area:2/2}
.escales .traversee .modules li:nth-child(6){grid-area:2/1}
.escales .traversee .modules li{display:block;text-align:center;padding:2.3rem 0 0;border:0;opacity:.78;transition:opacity .5s}
.escales .traversee .modules li.atteint{opacity:1}
.escales .traversee .modules li::before{display:block;font-size:1.6rem;margin-bottom:.35rem}
.escales .traversee .modules b{display:block}
.escales .traversee .modules span{display:block;max-width:24em;margin:.3rem auto 0}
@media (max-width:900px){
  .escales .traversee{--bord:0px;padding:1.2rem 0 0 3rem}
  .escales .traversee .modules{grid-template-columns:1fr;gap:1.8rem}
  .escales .traversee .modules li:nth-child(n){grid-area:auto;text-align:left;padding-top:0}
  .escales .traversee .modules span{margin:.2rem 0 0}
}