/* 3d-loireatlantique.com, seconde refonte du 27/10/2026 : « estuaire et grue ».
   Marine des quais, jaune des grues du port, blanc de coque. Big Shoulders Display pour les titres, Libre Franklin pour le texte.
   Angles droits partout, aucun filet, aucune ombre, aucun dégradé. */
@font-face{font-family:"Big Shoulders";src:url(/assets/fonts/big-shoulders-display-wght.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Franklin;src:url(/assets/fonts/libre-franklin-wght.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--marine:#0b2341;--marine2:#14335a;--jaune:#f6c200;--blanc:#fbfaf5;--beton:#e4e3dc;--encre:#0b2341;--marge:clamp(20px,4vw,56px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 18px/1.55 Franklin,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Big Shoulders",Impact,sans-serif;font-weight:800;line-height:.95;letter-spacing:-.01em;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(3.2rem,8.4vw,8.6rem);text-transform:uppercase}
h2{font-size:clamp(2.3rem,4.6vw,4.4rem);text-transform:uppercase}
h3{font-size:1.65rem;font-weight:700}
p{margin:0 0 1em}
a{color:inherit;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
.cadre{width:calc(100% - 2*var(--marge));max-width:1360px;margin-inline:auto}
.saut{position:absolute;left:-999px;top:8px;background:var(--jaune);color:var(--marine);padding:10px 16px;z-index:99}
.saut:focus{left:8px}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
.btn{display:inline-flex;align-items:center;min-height:54px;padding:0 28px;background:var(--jaune);color:var(--marine);font:700 1.05rem Franklin,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{background:#ffd640;transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.sombre{background:var(--marine);color:var(--blanc)}
.btn.sombre:hover{background:var(--marine2)}
.souligne{font-weight:700;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--jaune);text-underline-offset:6px}
.souligne:hover{text-decoration-color:currentColor}
.souligne.clair{color:var(--blanc)}
/* tête */
.tete{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px var(--marge);background:var(--marine);color:var(--blanc)}
.nom{font:800 1.6rem/1 "Big Shoulders",sans-serif;text-transform:uppercase;text-decoration:none;letter-spacing:.01em}
.nav{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:600}
.nav a:not(.appel-nav):hover{color:var(--jaune)}
.appel-nav{background:var(--jaune);color:var(--marine);padding:10px 18px;font-weight:700}
/* une : accueil et villes */
.une{background:var(--marine);color:var(--blanc);padding:clamp(48px,7vw,110px) 0 0}
.une-grille{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.une h1{color:var(--blanc)}
.une-sous{font-size:clamp(1.1rem,1.6vw,1.4rem);max-width:46ch}
.une-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:28px}
.ticket{background:var(--jaune);color:var(--marine);padding:32px;margin-bottom:clamp(-60px,-4vw,-30px);position:relative;z-index:2}
.ticket h2{font-size:2.6rem;margin-bottom:.3em}
.ticket ul{margin:0 0 1em;padding-left:1.1em;font-weight:600}
.ticket .btn{background:var(--marine);color:var(--blanc);width:100%;justify-content:center}
.une-photo{margin:0;height:clamp(260px,38vw,520px);overflow:hidden}
.une-photo img{width:100%;height:120%;object-fit:cover}
.une-ville{padding-bottom:clamp(48px,6vw,90px)}
.une-ville .une-grille{align-items:center}
.ariane{font-size:.95rem;margin-bottom:22px;opacity:.85}
.ariane a{text-decoration:underline}
.ville-carte{background:var(--marine2);padding:20px}
.ville-carte p{margin:12px 0 0;font-weight:600}
/* carte */
.carte{width:100%;height:auto;display:block}
.carte .ocean{fill:var(--jaune);font:800 22px "Big Shoulders",sans-serif;text-transform:uppercase;opacity:.6}
.carte .loire{fill:none;stroke:var(--jaune);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.carte circle{fill:var(--blanc);transition:r .2s,fill .2s}
.carte .commune:hover circle,.carte .commune:focus circle{fill:var(--jaune)}
.carte .actif circle{fill:var(--jaune)}
.carte text{fill:var(--blanc);font:600 15px Franklin,sans-serif}
.carte .actif text{font-size:20px;font-weight:800}
/* défilé des communes */
.defile{background:var(--jaune);color:var(--marine);overflow:hidden;padding:18px 0}
.defile-piste{display:flex;gap:48px;width:max-content;font:800 clamp(1.8rem,3vw,2.6rem)/1 "Big Shoulders",sans-serif;text-transform:uppercase}
.defile a{text-decoration:none;white-space:nowrap}
.defile a:hover{text-decoration:underline}
/* sections */
section{padding:clamp(80px,10vw,170px) 0}
.une,.defile{padding-left:0;padding-right:0}
.tete-section{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:40px}
.tete-section p{font-size:1.15rem;max-width:48ch}
/* services en rangs */
.rangs{list-style:none;margin:0 0 32px;padding:0}
.rang a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 160px;gap:32px;align-items:center;padding:26px 20px;text-decoration:none;background:var(--blanc);transition:background .25s}
.rang:nth-child(odd) a{background:var(--beton)}
.rang a:hover,.rang a:focus-visible{background:var(--marine);color:var(--blanc)}
.rang-nom{font:800 clamp(1.8rem,3.2vw,3rem)/1 "Big Shoulders",sans-serif;text-transform:uppercase}
.rang img{width:160px;height:110px;object-fit:cover}
.autres{background:var(--blanc)}
/* estuaire */
.estuaire{background:var(--marine);color:var(--blanc)}
.estuaire-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,90px);align-items:start}
.estuaire-texte>p{font-size:1.15rem;max-width:44ch}
.zones{display:grid;gap:24px;margin-top:32px}
.zone h3{color:var(--jaune);margin-bottom:.3em}
.zone ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.zone a{text-decoration:none;font-weight:600}
.zone a:hover{color:var(--jaune)}
.zone span{opacity:.7;margin-left:6px;font-weight:400;font-variant-numeric:tabular-nums}
.estuaire-carte{position:sticky;top:90px}
.estuaire .zones{color:var(--blanc)}
/* chemin */
.chemin{background:var(--beton)}
.chemin-liste{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.chemin-liste li{padding:28px 26px 30px;background:var(--blanc)}
.chemin-liste li:nth-child(2){background:#f1f0ea}.chemin-liste li:nth-child(3){background:var(--blanc)}.chemin-liste li:nth-child(4){background:var(--jaune)}
/* matières */
.matiere-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,5vw,90px);align-items:start}
.matiere-grille img{margin-top:24px;width:100%;aspect-ratio:4/3;object-fit:cover}
.matieres,.cas-table{width:100%;border-collapse:collapse;font-size:1.05rem}
.matieres caption,.cas-table caption{text-align:left;font-weight:700;padding-bottom:14px}
.matieres th,.matieres td,.cas-table th,.cas-table td{text-align:left;vertical-align:top;padding:18px 16px}
.matieres thead th{background:var(--marine);color:var(--blanc)}
.matieres tbody tr:nth-child(odd),.cas-table tr:nth-child(odd){background:var(--beton)}
.matieres tbody th,.cas-table th{font:800 1.5rem/1 "Big Shoulders",sans-serif;text-transform:uppercase;width:32%}
/* avis */
.avis-bande{background:var(--marine2);color:var(--blanc);overflow:hidden}
.intro{font-size:1.15rem;max-width:52ch}
.avis-piste{display:flex;gap:24px;padding:24px var(--marge) 8px;width:max-content}
.avis-piste figure{margin:0;width:min(420px,80vw);background:var(--marine);padding:30px}
.avis-piste blockquote{margin:0 0 18px;font-size:1.1rem}
.avis-piste figcaption{font-weight:700;color:var(--jaune)}
/* questions */
.questions-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,90px)}
.questions-tete{position:sticky;top:100px;align-self:start}
.questions-liste details{background:var(--beton);margin-bottom:8px}
.questions-liste summary{cursor:pointer;padding:20px 54px 20px 22px;font-weight:700;font-size:1.1rem;list-style:none;position:relative}
.questions-liste summary::-webkit-details-marker{display:none}
.questions-liste summary::after{content:"+";position:absolute;right:22px;top:12px;font:800 2rem/1 "Big Shoulders",sans-serif;transition:transform .25s}
.questions-liste details[open] summary::after{transform:rotate(45deg)}
.questions-liste details p{padding:0 22px 22px;margin:0}
.questions-liste summary:hover{background:var(--jaune)}
/* guides */
.lectures-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,90px)}
.lectures ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lectures a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:24px;padding:22px;background:var(--beton);text-decoration:none;transition:background .2s}
.lectures a:hover{background:var(--jaune)}
.lectures strong{font:800 1.6rem/1 "Big Shoulders",sans-serif;text-transform:uppercase}
/* jaune final */
.jaune{background:var(--jaune);color:var(--marine)}
.jaune-grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
.jaune h2{font-size:clamp(2.8rem,6vw,6rem);margin:0}
.jaune p{font-size:1.2rem}
/* pages villes */
.demandes-liste{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.demandes-liste li{padding-top:22px;border-top:8px solid var(--jaune)}
.recit{background:var(--beton)}
.recit-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,5vw,90px);align-items:start}
.recit-exergue{margin:0;font:700 clamp(1.5rem,2.4vw,2.1rem)/1.2 "Big Shoulders",sans-serif;color:var(--marine);max-width:24ch}
.recit-texte p{max-width:62ch}
.index-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,90px)}
.index-liste{list-style:none;margin:0;padding:0}
.index-liste a{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:18px 0;text-decoration:none;font-weight:600}
.index-liste li:nth-child(odd) a{background:var(--beton);padding-inline:16px}
.index-liste li:nth-child(even) a{padding-inline:16px}
.index-liste a:hover{background:var(--marine);color:var(--blanc)}
.index-liste a span:first-child{font:800 1.5rem/1 "Big Shoulders",sans-serif;text-transform:uppercase}
.ligne{background:var(--marine);color:var(--blanc)}
.arrets{list-style:none;padding:0;margin:40px 0 32px;display:flex;flex-wrap:wrap;gap:0;position:relative}
.arrets li{position:relative;padding:34px 30px 0 0;flex:1 1 140px}
.arrets li::before{content:"";position:absolute;top:8px;left:0;right:0;height:8px;background:var(--jaune)}
.arrets li::after{content:"";position:absolute;top:0;left:0;width:24px;height:24px;border-radius:50%;background:var(--blanc);border:6px solid var(--jaune)}
.arrets a{font:800 1.7rem/1 "Big Shoulders",sans-serif;text-transform:uppercase;text-decoration:none}
.arrets a:hover{color:var(--jaune)}
/* pages services */
.service-une{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:var(--blanc);padding:0;min-height:70vh}
.service-une-texte{padding:clamp(48px,7vw,110px) var(--marge);display:flex;flex-direction:column;justify-content:center}
.service-une h1{font-size:clamp(2.8rem,6vw,6.2rem)}
.service-une-photo{margin:0;overflow:hidden;background:var(--marine)}
.service-une-photo img{width:100%;height:100%;object-fit:cover}
.cas-grille{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:clamp(32px,5vw,90px)}
.conseil{background:var(--jaune)}
.conseil-grille{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,90px)}
.conseil-texte{font:700 clamp(1.4rem,2.2vw,2rem)/1.25 "Big Shoulders",sans-serif}
.partout-villes{font:700 clamp(1.4rem,2.4vw,2.2rem)/1.35 "Big Shoulders",sans-serif;max-width:none}
.partout-villes a{text-decoration:none}
.partout-villes a:hover{background:var(--jaune)}
/* bandeau (guides, faq, services) */
.bandeau{background:var(--marine);color:var(--blanc);padding:clamp(56px,7vw,110px) 0}
.bandeau h1{font-size:clamp(2.8rem,6.4vw,6.4rem);max-width:16ch}
.lecture-grille{display:grid;grid-template-columns:minmax(220px,.5fr) minmax(0,1.4fr);gap:clamp(32px,5vw,90px)}
.sommaire{position:sticky;top:100px;align-self:start;background:var(--beton);padding:24px}
.sommaire h2{font-size:1.5rem;margin-top:.8em}
.sommaire h2:first-child{margin-top:0}
.sommaire ol,.sommaire ul{padding-left:1.1em;margin:0}
.lecture-texte{max-width:68ch}
.lecture-texte h2{font-size:clamp(2rem,3.4vw,3rem);margin-top:1.2em}
.lecture-texte h2:first-child{margin-top:0}
.faq-theme{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr);gap:clamp(32px,5vw,90px);margin-bottom:72px}
/* contact */
.demande{background:var(--marine);color:var(--blanc)}
.demande-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,5vw,90px)}
.formulaire form{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--blanc);color:var(--encre);padding:32px}
.formulaire .large{grid-column:1/-1}
label{display:grid;gap:6px;font-weight:600}
input,select,textarea{font:inherit;padding:14px;border:2px solid var(--marine);background:#fff;color:var(--encre);border-radius:0}
input:focus,select:focus,textarea:focus{outline:3px solid var(--jaune);outline-offset:0}
.cache{position:absolute;left:-9999px}
.note{font-size:.95rem}
.merci{background:var(--jaune);color:var(--marine);padding:28px;margin-bottom:20px}
/* bas */
.bas{background:var(--marine);color:var(--blanc);padding:clamp(64px,8vw,120px) var(--marge) 28px}
.bas-colonnes{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:40px;max-width:1360px;margin:0 auto}
.bas-titre{font-size:1.7rem;color:var(--jaune)}
.bas ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.bas-villes{grid-template-columns:1fr 1fr}
.bas a{text-decoration:none}.bas a:hover{text-decoration:underline}
.bas-nom{font:900 clamp(3.4rem,13.5vw,15rem)/.85 "Big Shoulders",sans-serif;text-transform:uppercase;margin:60px auto 24px;max-width:1360px;color:var(--jaune);white-space:nowrap;overflow:hidden}
.bas-mentions{max-width:1360px;margin:0 auto;font-size:.95rem}
/* téléphone */
@media (max-width:900px){
  .une-grille,.estuaire-grille,.matiere-grille,.questions-grille,.lectures-grille,.jaune-grille,.recit-grille,.index-grille,.cas-grille,.conseil-grille,.lecture-grille,.faq-theme,.demande-grille,.tete-section,.service-une{grid-template-columns:1fr}
  .ticket{margin-bottom:0}
  .une{padding-bottom:0}
  .rang a{grid-template-columns:1fr 96px;gap:16px}
  .rang-texte{grid-column:1;font-size:1rem}
  .rang img{grid-row:1/3;grid-column:2;width:96px;height:96px}
  .chemin-liste,.demandes-liste{grid-template-columns:1fr}
  .bas-colonnes{grid-template-columns:1fr 1fr}
  .questions-tete,.sommaire,.estuaire-carte{position:static}
  .formulaire form{grid-template-columns:1fr;padding:22px}
  .lectures a{grid-template-columns:1fr}
  .service-une{min-height:0}.service-une-photo{height:300px}
  .nav{gap:14px;font-size:.95rem}
  .tete{flex-wrap:wrap}
}
@media (max-width:520px){.nav a:not(.appel-nav){font-size:.92rem}.bas-colonnes{grid-template-columns:1fr}.index-liste a{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
input,select,textarea{min-width:0;max-width:100%;width:100%}.formulaire,.formulaire form{min-width:0}