@font-face{font-family:"Adventor";src:url(fonts/adventor-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-600.woff) format("woff");font-weight:600;font-display:swap}

:root{
  --blanc:#ffffff;
  --encre:#12203d;
  --encre-2:#46526b;
  --bleu:#2148e0;
  --bleu-fonce:#1736b3;
  --ciel:#eaf0ff;
  --jaune:#ffd43b;
  --ligne:#d9e1f2;
  --titre:"Adventor","Century Gothic","Avenir Next",sans-serif;
  --texte:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:0;
  --page:min(1180px,calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 17px/1.6 var(--texte);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--bleu)}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--titre);font-weight:700;color:var(--encre);margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.06}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.08}
h3{font-size:1.35rem;line-height:1.2}
.wrap{width:var(--page);margin-inline:auto}
.nowrap{white-space:nowrap}
.lead{font-size:1.15rem;color:var(--encre-2);max-width:34em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--jaune);color:var(--encre);padding:10px 14px;border-radius:0}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;border-radius:0}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 1rem/1 var(--texte);text-decoration:none;padding:16px 22px;border-radius:0;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn-appel{background:var(--jaune);color:var(--encre)}
.btn-appel:hover{background:#ffc800}
.btn-bleu{background:var(--bleu);color:#fff}
.btn-bleu:hover{background:var(--bleu-fonce)}
.btn-contour{border-color:var(--bleu);color:var(--bleu);background:transparent}
.btn-contour:hover{background:var(--ciel)}

/* en-tête */
.entete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)}
.entete .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.marque{font-family:var(--titre);font-size:1.35rem;color:var(--encre);text-decoration:none;line-height:1}
.marque span{color:var(--bleu)}
.marque small{display:block;font:500 .78rem/1.3 var(--texte);color:var(--encre-2);margin-top:4px}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--encre);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--bleu)}
.entete-actions{display:flex;gap:10px}
.entete .btn{padding:12px 16px;font-size:.95rem}
.tel-mobile{display:none}

/* accueil */
.accueil{padding:56px 0 88px;overflow:hidden}
@media (min-width:981px) and (min-height:700px){.accueil{min-height:calc(100svh - 72px);display:flex;align-items:center;justify-content:center}.accueil>.wrap{flex:0 1 auto}}
.accueil .wrap{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.accueil h1{max-width:11em}
.accueil .lead{margin:22px 0 30px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.atouts{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:12px;max-width:34em}
.atouts li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.atouts li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:0;background:var(--ciel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232148e0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.visuel{position:relative;min-height:470px}
.visuel .photo-a{position:absolute;right:0;top:0;width:86%;z-index:2}
.visuel .photo-a img,.visuel .photo-b img{border-radius:0;width:100%;aspect-ratio:4/3;object-fit:cover}
.visuel .photo-a::before{content:"";position:absolute;inset:22px -22px -22px 22px;background:var(--bleu);border-radius:0;z-index:-1}
.visuel .photo-b{position:absolute;left:0;bottom:0;width:66%;z-index:3}
.visuel .photo-b img{aspect-ratio:591/268;border:6px solid #fff;border-radius:0}
.pastille{position:absolute;z-index:4;right:-6px;bottom:110px;max-width:190px;background:var(--jaune);font:700 1rem/1.2 var(--titre);color:var(--encre);transform:rotate(-4deg);padding:14px 18px}
@media (prefers-reduced-motion:no-preference){
  .visuel .photo-a{animation:entre 700ms cubic-bezier(.2,.7,.2,1) both}
  .visuel .photo-b{animation:entre 700ms 140ms cubic-bezier(.2,.7,.2,1) both}
  .pastille{animation:pose 500ms 520ms cubic-bezier(.3,1.6,.5,1) both}
  @keyframes entre{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes pose{from{opacity:0;transform:rotate(-30deg) scale(.6)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
}

/* sections */
section{padding:96px 0}
.tete{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:end;margin-bottom:44px}
.tete p{margin:0;color:var(--encre-2)}
.tete-droite{grid-template-columns:7fr 5fr}
.tete-droite h2{order:2}

/* problèmes */
.problemes{background:var(--ciel)}
.tuiles{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"fuit bouche" "autre panne";gap:18px}
.tuiles .autre{grid-area:autre;align-self:center;margin:0;padding:0 30px 0 4px;font:700 1.35rem/1.35 var(--titre);color:var(--encre)}
.tuiles .autre a{color:var(--bleu);white-space:nowrap}
.t-fuit{grid-area:fuit}.t-bouche{grid-area:bouche}.t-panne{grid-area:panne}
.tuile{background:#fff;color:var(--encre);border:1px solid var(--ligne);padding:24px 26px;display:flex;flex-direction:column;gap:8px;min-height:236px}
.tuile .picto{width:42px;height:42px;color:var(--bleu);margin-bottom:6px}
.tuile p{margin:0;color:var(--encre-2)}
.prix-min{font-weight:600;color:var(--bleu)}
.tuile .btn{align-self:flex-start;margin-top:auto}
.tuile:hover,.tuile:focus-within{background:var(--bleu);border-color:var(--bleu);color:#fff}
.tuile:hover h3,.tuile:hover p,.tuile:hover .prix-min,.tuile:hover .picto,
.tuile:focus-within h3,.tuile:focus-within p,.tuile:focus-within .prix-min,.tuile:focus-within .picto{color:#fff}
.tuile:hover .btn,.tuile:focus-within .btn{background:#fff;border-color:#fff;color:var(--bleu)}
@media (min-width:641px){
  .tuiles:has(.t-fuit:hover),.tuiles:has(.t-fuit:focus-within){grid-template-columns:1.45fr 1fr;grid-template-rows:1.25fr 1fr}
  .tuiles:has(.t-bouche:hover),.tuiles:has(.t-bouche:focus-within){grid-template-columns:1fr 1.45fr;grid-template-rows:1.25fr 1fr}
  .tuiles:has(.t-panne:hover),.tuiles:has(.t-panne:focus-within){grid-template-columns:1fr 1.45fr;grid-template-rows:1fr 1.25fr}
}
@media (prefers-reduced-motion:no-preference){
  .tuiles{transition:grid-template-columns .45s cubic-bezier(.2,.7,.2,1),grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
  .tuile,.tuile h3,.tuile p,.tuile .prix-min,.tuile .picto,.tuile .btn{transition:background .25s,color .25s,border-color .25s}
}
.autre{margin:26px 0 0;font-weight:500}

/* étapes */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:e}
.etapes li{counter-increment:e;padding:28px 26px 26px;border-top:4px solid var(--bleu);background:#fff}
.etapes li::before{content:counter(e);display:block;font:700 2.6rem/1 var(--titre);color:var(--bleu);margin-bottom:14px}
.etapes li:nth-child(2){margin-top:36px}
.etapes li:nth-child(3){margin-top:72px}
.etapes h3{margin-bottom:8px}
.etapes p{margin:0;color:var(--encre-2)}

/* tarifs */
#tarifs{background:var(--ciel)}
.tarifs-grille{display:grid;grid-template-columns:8fr 3fr;gap:40px;align-items:start}
.liste-prix{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.liste-prix li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #c9d4ee}
.liste-prix span small{display:block;color:var(--encre-2);font-size:.85rem}
.liste-prix li{align-items:center}
.liste-prix b{font:700 1.5rem/1 var(--titre);white-space:nowrap;color:var(--encre)}
.liste-prix b small,.diag b small{font:600 .8rem/1 var(--texte);color:var(--encre-2);margin-left:5px;letter-spacing:.02em}
.diag{margin-top:22px;display:flex;justify-content:space-between;gap:16px;background:var(--jaune);border-radius:0;padding:18px 22px}
.diag small{display:block;font-size:.85rem}
.diag{align-items:center}
.diag b{font:700 1.5rem/1 var(--titre);white-space:nowrap}
.diag b small{display:inline;color:var(--encre)}
.a-savoir{background:#fff;border:1px solid var(--ligne);font-size:.9rem;padding:22px;position:sticky;top:96px}
.a-savoir h3{margin-bottom:10px}
.a-savoir li{margin-bottom:6px}
.a-savoir ul{margin:0;padding-left:18px;color:var(--encre-2)}
.a-savoir li{margin-bottom:8px}

/* qui */
.qui .wrap{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
.qui figure{margin:0;position:relative}
.qui figure img{border-radius:0;width:100%}
.qui figure::after{content:"";position:absolute;left:-18px;bottom:-18px;width:46%;height:60%;background:var(--jaune);border-radius:0;z-index:-1}
.qui figure{z-index:0}
.qui h2{margin-bottom:22px}

/* zone */
.zone{background:var(--ciel)}
.zone .wrap{display:grid;grid-template-columns:6fr 5fr;gap:56px;align-items:center}
.plan{background:#fff;border:1px solid var(--ligne)}
.plan .fond{fill:#f6f8fd}.plan .v{fill:#e3e8f4;stroke:#f6f8fd;stroke-width:2}.plan .z{fill:#dbe5ff;stroke:var(--bleu);stroke-width:1.6}
.plan .lbl text{font:700 16px var(--titre);fill:var(--encre);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.plan .pt{fill:var(--bleu)}.plan .pleyel{font:600 14px var(--texte);fill:var(--encre);paint-order:stroke;stroke:#fff;stroke-width:4px}
.trajet{fill:none;stroke:var(--encre);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 8}
.plan figcaption{font-size:.85rem;color:var(--encre-2);padding:10px 14px;border-top:1px solid var(--ligne)}
.plan svg{width:100%;height:auto;display:block}
.communes{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px;padding:0;list-style:none}
.communes li{background:#fff;border:1px solid var(--ligne);border-radius:0;padding:8px 14px;font-weight:500;font-size:.95rem}
.communes li.demande{border-style:dashed;color:var(--encre-2)}
@media (prefers-reduced-motion:no-preference){
  .trajet{stroke-dasharray:6 8;animation:roule 30s linear infinite}
  @keyframes roule{to{stroke-dashoffset:-280}}
}

/* pros */
.pros{background:var(--encre);color:#fff}
.pros h2,.pros h3{color:#fff}
.pros .wrap{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
.pros p{color:#c9d2e6}
.tarif-pro{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.tarif-pro div{border:1px solid #33416a;border-radius:0;padding:20px}
.tarif-pro b{display:block;font:700 2.2rem/1 var(--titre);color:var(--jaune);margin-bottom:8px}
.tarif-pro span{color:#c9d2e6;font-size:.95rem}
.engagements{list-style:none;margin:0;padding:0;display:grid;gap:0}
.engagements li{padding:20px 0;border-bottom:1px solid #33416a}
.engagements li:first-child{padding-top:0}
.engagements h3{margin-bottom:4px}
.engagements p{margin:0}
.pros .actions{margin-top:30px}
.pros .btn-contour{border-color:#fff;color:#fff}
.pros .btn-contour:hover{background:#ffffff1a}

/* questions */
.questions .wrap{display:grid;grid-template-columns:4fr 7fr;gap:64px;align-items:start}
.questions h2{position:sticky;top:110px}
details{border-bottom:1px solid var(--ligne)}
details:first-of-type{border-top:1px solid var(--ligne)}
summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-weight:600;font-size:1.05rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-10px;border-right:2.5px solid var(--bleu);border-bottom:2.5px solid var(--bleu);transform:rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
details p{color:var(--encre-2);padding-right:40px}

/* contact */
.contact{background:var(--bleu);color:#fff}
.contact .wrap{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
.contact h2{color:#fff}
.contact p{color:#dfe6ff}
.tel-grand{display:inline-block;font:700 clamp(1.8rem,3.4vw,2.5rem)/1.1 var(--titre);color:#fff;text-decoration:none;margin:18px 0 8px;border-bottom:3px solid var(--jaune)}
.securite{margin-top:26px;padding:18px 20px;border-radius:0;background:#ffffff14;font-size:.95rem}
.carte-form{background:#fff;color:var(--encre);border-radius:0;padding:32px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champs .large{grid-column:1/-1}
.champs label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:.92rem}
.champs label span.opt{font-weight:400;color:var(--encre-2)}
.champs input,.champs select,.champs textarea{font:400 1rem/1.4 var(--texte);color:var(--encre);padding:13px 14px;border:1.5px solid var(--ligne);border-radius:0;background:#fff;width:100%}
.champs input:focus,.champs select:focus,.champs textarea:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px #2148e033}
.champs textarea{min-height:110px;resize:vertical}
.champs input[type=file]{padding:10px;background:var(--ciel);border-style:dashed}
.note{font-size:.82rem;color:var(--encre-2);margin:0;font-weight:400}
.champs button{justify-self:start}
.statut:not(:empty){grid-column:1/-1;background:var(--ciel);border-left:5px solid var(--bleu);padding:14px 16px;border-radius:0;font-weight:600;scroll-margin-top:110px}
.statut a{color:var(--bleu)}

/* recrutement */
.recrutement .wrap{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:start}
.recrutement ul{padding-left:20px;color:var(--encre-2)}
.ouvrir{border:2px solid var(--bleu);border-radius:0;padding:0 26px}
.ouvrir summary{font-family:var(--titre);font-size:1.35rem;padding:24px 44px 24px 0}
.ouvrir[open]{padding-bottom:26px}
.ouvrir .champs{margin-top:6px}

/* pied */
.pied{background:var(--encre);color:#c9d2e6;padding:48px 0 120px;font-size:.95rem}
.pied .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.pied a{color:#fff}
.pied .marque{color:#fff;display:inline-block;margin-bottom:12px}
.pied .marque small{color:#c9d2e6}
.pied .marque span{color:#8ea6ff}
.pied p{margin:0 0 .5em}

.nw{white-space:nowrap}
.statut:empty{display:none}
.carte-form .note{color:var(--encre-2)}
.champs label .lib{display:block}
section h2+p,section h2+.lead,section h2+.tel-grand{margin-top:18px}

@media (min-width:641px){.pied{padding-bottom:48px}}
/* barre mobile */
.barre{display:none}

@media (max-width:980px){
  .nav{display:none}
  .accueil .wrap,.tete,.tete-droite,.tarifs-grille,.qui .wrap,.zone .wrap,.pros .wrap,.questions .wrap,.contact .wrap,.recrutement .wrap{grid-template-columns:1fr;gap:34px}
  .tete-droite h2{order:0}
  .questions h2,.a-savoir{position:static}
  .visuel{min-height:0;height:min(92vw,520px)}
  .etapes{grid-template-columns:1fr}
  .etapes li:nth-child(n){margin-top:0}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:68px 0}
  .accueil{padding:30px 0 64px}
  .entete .wrap{min-height:62px;gap:12px}
  .entete-actions{display:none}
  .marque small{display:none}
  .actions .btn{width:100%;justify-content:center}
  .visuel{height:auto;display:grid;gap:0;padding-bottom:10px}
  .visuel .photo-a,.visuel .photo-b{position:relative;width:auto}
  .visuel .photo-a{margin-right:18px}
  .visuel .photo-b{width:72%;margin-top:-54px;margin-left:auto}
  .pastille{max-width:170px;font-size:.9rem;right:auto;left:0;bottom:6px}
  .tuiles{grid-template-columns:1fr}
  .tuiles{grid-template-areas:"fuit" "bouche" "panne" "autre";grid-template-rows:none}
  .tuiles .autre{padding:8px 0 0;font-size:1.15rem}
  .tuile{min-height:0}
  .liste-prix{grid-template-columns:1fr}
  .tarif-pro{grid-template-columns:1fr}
  .champs{grid-template-columns:1fr}
  .carte-form{padding:22px}
  .pied .wrap{grid-template-columns:1fr 1fr}
  .pied .wrap>div:first-child{grid-column:1/-1}
  .barre{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--ligne)}
  .barre .btn{justify-content:center;padding:14px 10px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* pages intérieures (communes, pannes, conditions, mentions) */
.page{padding:48px 0 96px}
.page .wrap{display:grid;grid-template-columns:7fr 4fr;grid-template-rows:auto 1fr;column-gap:56px;row-gap:0;align-items:start}
.page .intro{grid-column:1;grid-row:1}
.page .suite{grid-column:1;grid-row:2}
.page .cote{grid-column:2;grid-row:1/3}
.page h1{margin-bottom:18px}
.page .lead{margin-bottom:8px}
.page article p{color:var(--encre-2)}
.page article ul{padding-left:20px;color:var(--encre-2)}
.page article li{margin-bottom:6px}
.page h2{font-size:1.6rem;margin:44px 0 14px}
.page details:last-of-type{border-bottom:1px solid var(--ligne)}
.page .cote{position:sticky;top:96px}
.encadre-prix{background:var(--ciel);padding:22px 24px}
.encadre-prix h2{font-size:1.2rem;margin:0 0 6px}
.encadre-prix .liste-prix{grid-template-columns:1fr;column-gap:0}
.encadre-prix .liste-prix li{border-color:#c9d4ee;padding:12px 0}
.encadre-prix .liste-prix b{font-size:1.3rem}
.encadre-prix .note{margin-top:12px}
.encadre-prix .actions{margin-top:18px}
.encadre-prix .actions .btn{width:100%;justify-content:center}
.conseils{border-left:4px solid var(--jaune);background:#fffbe6;padding:16px 20px;margin:24px 0}
.conseils p{margin:0 0 6px;font-weight:600;color:var(--encre)}
.conseils ul{margin:0}
.liens-pages{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.liens-pages a{display:block;background:#fff;border:1px solid var(--ligne);padding:8px 14px;font-weight:500;font-size:.95rem;text-decoration:none;color:var(--encre)}
.liens-pages a:hover{border-color:var(--bleu);color:var(--bleu)}
.page-texte .wrap{grid-template-columns:1fr;max-width:760px}
.page-texte article{grid-column:1;grid-row:auto}
.page-texte h2{margin-top:40px}
.page-texte .encadre{border-left:4px solid var(--bleu);background:var(--ciel);padding:14px 18px;margin:20px 0}
.page-texte .encadre p{margin:0}
.page-texte .modele{border:1px solid #c9d3f2;padding:16px 18px;font-size:15px}
.page-texte .modele p{margin:6px 0}
.page-texte .sommaire{padding-left:20px}
.page-texte .sommaire li{margin:2px 0}
@media (max-width:980px){
  .page .wrap{grid-template-columns:1fr;grid-template-rows:none;row-gap:28px}
  .page .intro,.page .suite,.page .cote{grid-column:1;grid-row:auto}
  .page .cote{position:static}
  .page .suite h2:first-child{margin-top:0}
}
@media (max-width:640px){
  .page{padding:28px 0 72px}
}

/* V20 : photos de la séance vélo cargo */
.visuel .photo-a img{object-position:70% 50%}
.qui figure img{aspect-ratio:4/3;object-fit:cover;height:auto}
.photo-page{margin:26px 0 24px}
.photo-page img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 62%;border-radius:0}
.photo-page figcaption{font-size:.85rem;color:var(--encre-2);padding-top:8px}
@media (max-width:980px){.qui figure{max-width:420px}}