/* Diapason RH — base du mockup validé, pages développées, une animation par section. */
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(/fonts/montserrat-Regular.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(/fonts/montserrat-Medium.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(/fonts/montserrat-SemiBold.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(/fonts/montserrat-Bold.woff2) format("woff2")}

@view-transition{navigation:auto}

:root{
  --nuit:#1b3154;--nuit-f:#172943;--ocre:#c89a24;--ocre-f:#b9881a;--fond:#f8fafd;--blanc:#fff;--brume:#dfe7f2;--brume-c:#eef2f8;--ivoire:#f7f2e7;--trait:#e4e9f1;
  --largeur:1240px;--marge:clamp(20px,5vw,80px);--haut:76px;
  --ombre:0 10px 30px rgba(20,48,92,.08);
  --ease:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--haut) + 20px);interpolate-size:allow-keywords}
body{margin:0;font:400 17px/1.65 Montserrat,"Segoe UI",Arial,sans-serif;color:var(--nuit);background:var(--blanc);-webkit-font-smoothing:antialiased;overflow-x:clip;-webkit-tap-highlight-color:transparent}
body.menu{overflow:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,blockquote,fieldset{margin:0;padding:0;border:0}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.14;color:var(--nuit);overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
::selection{background:var(--ocre);color:var(--nuit)}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
.evitement{position:absolute;left:16px;top:-60px;background:var(--nuit);color:#fff;padding:10px 16px;z-index:60}
.evitement:focus{top:8px}
.cadre{width:min(100%,calc(var(--largeur) + var(--marge)*2));margin-inline:auto;padding-inline:var(--marge)}


/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 32px;border:2px solid var(--ocre);border-radius:999px;background:var(--ocre);color:var(--nuit);font:600 16px/1.2 Montserrat,sans-serif;cursor:pointer;transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease,transform 160ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn svg{flex:none;width:18px;height:12px;transition:transform 220ms var(--ease)}
.btn--contour{background:transparent;color:var(--ocre-f)}
.btn--contour-clair{background:transparent;color:#fff}
.btn--petit{min-height:44px;padding:0 22px;font-size:16px}
.lien{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:16px;min-height:44px}
.lien svg{flex:none;width:18px;height:12px;color:var(--ocre);transition:transform 220ms var(--ease)}
.lien--petit{font-size:16px}
.lien:active svg{transform:translateX(6px)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#d9b04a;border-color:#d9b04a;color:var(--nuit)}
  .btn:hover svg,.lien:hover svg,.carte:hover .lien svg{transform:translateX(5px)}
}

/* En-tête */
.entete::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.68);-webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);box-shadow:0 1px 0 rgba(20,48,92,.07),0 10px 30px rgba(20,48,92,.08);opacity:0;transition:opacity 260ms ease}
.entete.colle::before,.no-js .entete::before{opacity:1}
body.menu .entete::before{opacity:1;background:#fff}
.entete__int{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--haut)}
.entete__logo img{width:190px;height:auto;transform-origin:left center;transition:transform 260ms var(--ease)}
.colle .entete__logo img{transform:scale(.9)}
.nav{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.nav__liens{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.nav__liens a{font-size:16px;font-weight:500;padding:6px 0;white-space:nowrap;transition:color 200ms ease}
.nav__liens a[aria-current=page]{color:var(--ocre-f);font-weight:600}
.nav__tel{display:none}
@media (hover:hover) and (pointer:fine){.nav__liens a:hover{color:var(--ocre-f)}}
.menu-btn{display:none;position:relative;width:46px;height:46px;border:0;border-radius:50%;background:var(--blanc);box-shadow:0 2px 10px rgba(20,48,92,.14);cursor:pointer;padding:0;transition:transform 160ms var(--ease)}
.menu-btn:active{transform:scale(.94)}
.menu-btn span{position:absolute;left:13px;right:13px;top:50%;height:2px;margin-top:-1px;background:var(--nuit);transition:transform 260ms var(--ease),opacity 160ms ease}
.menu-btn span:nth-child(1){transform:translateY(-6px)}
.menu-btn span:nth-child(3){transform:translateY(6px)}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:rotate(-45deg)}


/* Photos de fond en parallaxe */
.fond{position:absolute;overflow:hidden}
.fond img{position:absolute;left:0;top:-9%;width:100%;height:118%;max-width:none;object-fit:cover}

/* Hero d'accueil */
.hero{position:relative;overflow:hidden;background:#fff;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:var(--haut)}
.hero>.cadre{width:min(100%,calc(var(--largeur) + var(--marge)*2))}
.hero__fond{position:absolute;right:0;top:0;width:78%;height:100%;overflow:hidden;animation:recul 2.4s var(--ease) both;transform-origin:70% 50%}
.hero__photo{width:100%;height:100%;object-fit:cover;object-position:100% 40%}
@keyframes recul{from{transform:scale(1.07)}to{transform:none}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.94) 0,rgba(255,255,255,.62) 8%,rgba(255,255,255,0) 20%),linear-gradient(90deg,#fff 0,#fff 22%,rgba(255,255,255,.9) 34%,rgba(255,255,255,0) 50%)}
.hero__txt{position:relative;z-index:2;max-width:640px;padding-block:56px}
.hero h1{font-size:clamp(34px,4.3vw,62px);margin-bottom:26px}
.hero p{max-width:530px;margin-bottom:32px}


/* Titres mot à mot */
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.mot>span{display:inline-block;animation:mot .9s var(--ease) both;animation-delay:calc(var(--i)*70ms + 120ms)}
@keyframes mot{from{transform:translateY(105%)}to{transform:none}}


/* Nos services (accueil) */
.services{padding-block:clamp(56px,6vw,84px)}
.services__g{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,13fr);gap:clamp(32px,4vw,64px);align-items:start}
.services h2{font-size:clamp(26px,2.4vw,35px);margin-bottom:22px}
.services p.intro{max-width:470px;margin-bottom:22px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}

/* Blocs génériques */
.section{padding-block:clamp(56px,7vw,96px)}
.section--ivoire{background:var(--ivoire)}
.section--brume{background:var(--brume-c)}
.section--nuit{background:var(--nuit);color:#fff}
.section--nuit h2{color:#fff}
.ent{margin-bottom:clamp(32px,4vw,52px)}
.ent h2{font-size:clamp(26px,2.9vw,40px)}
.ent__intro{margin-top:16px;max-width:600px}
.ent--colle{margin-bottom:0;position:sticky;top:calc(var(--haut) + 32px)}
.deux{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,12fr);gap:clamp(32px,5vw,72px);align-items:center}
.deux--inv{grid-template-columns:minmax(0,13fr) minmax(0,9fr)}
.deux--faq{grid-template-columns:minmax(0,9fr) minmax(0,13fr);align-items:start}
.deux--faq .ent{margin-bottom:0}
.deux>div>h2{font-size:clamp(26px,2.6vw,36px);margin-bottom:22px}
.deux p+p{margin-top:18px}
.deux .btn{margin-top:28px}
.photo{border-radius:12px;overflow:hidden;aspect-ratio:15/16}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.js .photo:not(.vu) img{transform:scale(1.14)}
.coches{margin-top:24px}
.coches li{display:flex;align-items:center;gap:14px;padding:6px 0}
.coches svg{flex:none;width:24px;height:24px}


/* Citation sur Rabat : les mots s'allument au défilement */
.manif{position:relative;overflow:hidden;background:var(--nuit);display:flex;align-items:center;min-height:clamp(380px,46vw,620px)}
.manif--court{min-height:clamp(280px,30vw,420px)}
.manif .fond{inset:0}
.manif::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(16,39,76,.56)}
.manif .cadre{position:relative;z-index:2}
.manif__txt{color:#fff;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-size:clamp(32px,5.4vw,76px);max-width:15em}
.manif__txt span{transition:opacity 200ms linear}


/* Aujourd'hui / Demain */
.compare{background:#fff;border-radius:14px;box-shadow:var(--ombre);padding:clamp(18px,2.4vw,28px)}
.compare__btn{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--brume-c);border-radius:999px;padding:4px;margin-bottom:18px}
.compare__btn i{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:var(--nuit);transition:transform 280ms var(--ease)}
.compare[data-etat=apres] .compare__btn i{transform:translateX(100%);background:var(--ocre)}
.compare__btn button{position:relative;min-height:46px;border:0;background:none;font-weight:600;font-size:16px;cursor:pointer;transition:color 200ms ease}
.compare__btn button[aria-pressed=true]{color:#fff}
.compare[data-etat=apres] .compare__btn button[aria-pressed=true]{color:var(--nuit)}
.compare li>span{grid-area:1/1;display:flex;align-items:center;gap:12px;min-height:30px;font-weight:500;transition:opacity 240ms ease,transform 300ms var(--ease);transition-delay:calc(var(--k,0)*50ms)}
.compare li:nth-child(2){--k:1}
.compare li:nth-child(3){--k:2}
.compare svg{flex:none;width:24px;height:24px}
.c-avant{color:#5c6d86}
.c-apres{opacity:0;transform:translateY(10px)}
.compare[data-etat=apres] .c-avant{opacity:0;transform:translateY(-10px)}
.compare[data-etat=apres] .c-apres{opacity:1;transform:none}

/* Bandeaux bleu nuit */
.bande{position:relative;overflow:hidden;background:var(--nuit);color:#fff}
.bande .fond{right:0;top:0;width:62%;height:100%}
.bande::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--nuit) 38%,rgba(20,48,92,.72) 50%,rgba(20,48,92,.22) 62%,rgba(20,48,92,0) 72%)}
.bande__int{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(32px,8vw,120px);min-height:260px;padding-block:44px}
.bande h2{color:#fff;font-size:clamp(25px,2.9vw,40px);font-weight:600}
.bande--pile .bande__int{flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;min-height:370px}
.bande--fine .bande__int{justify-content:space-between;min-height:126px;padding-block:26px}
.bande--fine h2{font-size:clamp(21px,2.1vw,29px)}
.bande--fine .fond{width:50%}
.bande--fine::before{background:linear-gradient(90deg,var(--nuit) 50%,rgba(20,48,92,.6) 64%,rgba(20,48,92,0) 86%)}
.bande--bord .fond{width:46%;transform:scaleX(-1)}
.bande--bord::before{background:linear-gradient(90deg,var(--nuit) 54%,rgba(20,48,92,.7) 64%,rgba(20,48,92,0) 84%)}

/* Bandeau titre des pages */
.tete--bas .tete__txt{padding-block:24px}
.tete .fond{right:0;top:0;width:76%;height:100%}
.tete>.cadre{position:relative;z-index:2}
.tete__txt{padding-block:44px}
.tete h1,.tete .tete__rubrique{font-size:clamp(32px,3.7vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1.14;margin-bottom:10px;color:var(--nuit)}
.tete p:not(.tete__rubrique){font-size:clamp(20px,2.1vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.015em;max-width:15em}



/* Pile de cartes qui se recouvrent */
.pile__c{position:sticky;top:calc(var(--haut) + 16px + var(--n)*12px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border-radius:16px;box-shadow:0 -6px 30px rgba(20,48,92,.1);overflow:hidden;margin-bottom:24px;min-height:420px}
.pile__txt{padding:clamp(24px,3.4vw,44px)}
.pile__txt h3{font-size:clamp(23px,2.2vw,30px);margin-bottom:10px}
.pile__txt .coches{margin-block:12px}
.pile__img{position:relative;min-height:220px}
.pile__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Cartes */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.carte{background:var(--blanc);border-radius:14px;box-shadow:var(--ombre);transition:box-shadow 260ms ease,translate 260ms var(--ease)}
@media (hover:hover) and (pointer:fine){.carte:hover{translate:0 -5px;box-shadow:0 18px 40px rgba(20,48,92,.14)}}
.carte--actu{overflow:hidden;display:flex;flex-direction:column;transition:box-shadow 260ms ease,translate 260ms var(--ease),opacity 180ms ease}
.carte__img{display:block;overflow:hidden;aspect-ratio:16/10}
.carte__img img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
@media (hover:hover) and (pointer:fine){.carte:hover .carte__img img{transform:scale(1.05)}}
.carte--actu>div{padding:22px 26px 20px;display:flex;flex-direction:column;flex:1;align-items:flex-start}
.carte__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:16px;margin-bottom:12px}
.carte--actu h3{font-size:19.5px;line-height:1.3;margin-bottom:10px;flex:1}
.entete-liste{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:32px}
.entete-liste h2{font-size:clamp(26px,2.6vw,36px)}
.une{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);background:#fff;border-radius:16px;box-shadow:var(--ombre);overflow:hidden}
.une__img{display:block;overflow:hidden;min-height:280px;position:relative}
.une__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.une__txt{padding:clamp(24px,3.6vw,48px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.une h2{font-size:clamp(24px,2.5vw,34px);margin-bottom:14px}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtres button{min-height:42px;padding:0 18px;border:1.5px solid #cdd7e5;border-radius:999px;background:#fff;font-weight:600;font-size:16px;cursor:pointer;transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,transform 160ms var(--ease)}
.filtres button:active{transform:scale(.96)}
.filtres button[aria-pressed=true]{background:var(--nuit);border-color:var(--nuit);color:#fff}
.carte.masque{display:none}
.carte.sort{opacity:0}


/* Article */
.article{max-width:760px;margin-inline:auto}
.article .carte__meta{margin-bottom:14px}
.article h1{font-size:clamp(27px,3vw,40px)}
.article h2{font-size:clamp(21px,2vw,24px);margin:32px 0 12px}
.article .btn{margin-top:32px}

/* Contact */
.contact-rapide{position:relative;z-index:3;margin-top:-44px}
.contact-rapide ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
@media (min-width:1260px){.contact-rapide ul{grid-template-columns:repeat(4,auto)}}
.carte--lien{display:flex;align-items:center;gap:16px;padding:18px 20px;height:100%;min-height:88px}
.carte--lien span{min-width:0;overflow-wrap:anywhere;font-size:16px;line-height:1.4}
.carte--lien b{display:block;font-weight:700}
.contact{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,13fr);gap:clamp(32px,4vw,56px)}
.contact h2{font-size:clamp(23px,2.3vw,31px);margin-bottom:26px}
.soc--contact{margin-top:18px}
.sujets{margin-bottom:22px}
.sujets legend{font-size:16px;font-weight:600;margin-bottom:10px;padding:0}
.sujets{display:flex;flex-wrap:wrap;gap:8px}
.sujets legend{width:100%}
.sujets label{cursor:pointer}
.sujets input{position:absolute;opacity:0;width:1px;height:1px}
.sujets span{display:flex;align-items:center;min-height:42px;padding:0 18px;border:1.5px solid #cdd7e5;border-radius:999px;font-weight:600;font-size:16px;transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,transform 160ms var(--ease)}
.sujets input:checked+span{background:var(--ocre);border-color:var(--ocre);color:var(--nuit)}
.sujets input:focus-visible+span{outline:3px solid var(--ocre);outline-offset:3px}
.sujets label:active span{transform:scale(.96)}
.champs-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.champ{display:block;position:relative;margin-bottom:18px;border:1.5px solid #d7dfea;border-radius:10px;background:var(--blanc);transition:border-color 200ms ease}
.champ:focus-within{border-color:var(--ocre)}
.champ span{position:absolute;left:14px;top:17px;font-size:16px;font-weight:500;pointer-events:none;transform-origin:left top;transition:transform 200ms var(--ease);color:#4c5d78}
.champ input:focus+span,.champ input:not(:placeholder-shown)+span,.champ textarea:focus+span,.champ textarea:not(:placeholder-shown)+span{transform:translateY(-10px) scale(.8)}
.champ b{color:#c0392b;font-weight:600}
.champ input,.champ textarea{display:block;width:100%;border:0;background:none;padding:25px 14px 9px;font:400 16px/1.4 Montserrat,sans-serif;color:var(--nuit);outline:0;border-radius:10px}
.champ textarea{min-height:150px;resize:vertical}
.champ--err{border-color:#c0392b}
.erreur{display:block;margin:-12px 0 14px;color:#b03022;font-size:16px;line-height:1.4}
.erreur:empty{display:none}
.statut{margin-top:16px;font-weight:500}
.statut:empty{display:none}
.statut a{color:var(--ocre-f);font-weight:600}

/* Mentions */
.texte{max-width:820px}
.texte h2{font-size:24px;margin:30px 0 10px}
.texte h2:first-child{margin-top:0}
.centre{text-align:center}

/* Pied de page */
.pied{background:var(--nuit);color:#fff}
.pied__devise{display:flex;align-items:baseline;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding-block:clamp(36px,4vw,56px) clamp(24px,3vw,36px)}
.pied__devise p:first-child{font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.14}
.pied__devise p:last-child{font-size:15px;font-weight:600;color:var(--ocre)}
.pied__g{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,3fr));gap:32px clamp(24px,4vw,56px);padding-block:clamp(28px,3vw,40px) clamp(36px,4vw,52px)}
.pied__logo img{width:190px;height:auto}
.pied__marque p{max-width:320px;margin-block:16px 20px;font-size:14px;line-height:1.55}
.pied__titre{font-size:15px;font-weight:700;color:var(--ocre);margin-bottom:12px}
.pied__g li{font-size:14px;padding-block:4px}
.pied__g li a{display:inline-block;max-width:100%;overflow-wrap:anywhere;transition:color 200ms ease,transform 200ms var(--ease)}
.soc{display:flex;gap:14px}
.soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;transition:transform 200ms var(--ease)}
.soc a:active{transform:scale(.94)}
.soc svg{width:20px;height:20px;fill:var(--nuit)}
.pied__bas{background:var(--nuit-f);font-size:14px}
.pied__bas .cadre{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:16px}
.pied__bas a{padding-inline:10px}
.pied__bas .cadre>span:last-child{display:flex;flex-wrap:wrap;gap:6px 0;min-width:0}
@media (hover:hover) and (pointer:fine){.pied__g li a:hover{color:var(--ocre);transform:translateX(3px)}.pied__bas a:hover{color:var(--ocre)}.soc a:hover{transform:translateY(-2px)}}
.soc--contact a{background:var(--nuit)}
.soc--contact svg{fill:#fff}

/* Barre d'action mobile */
.barre-m{display:none}

/* Entrées au défilement */
.js [data-e]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease),transform 800ms var(--ease),clip-path 1.1s var(--ease);transition-delay:calc(var(--r,0)*70ms)}
.js [data-e=d]{transform:translateX(32px)}
.js [data-e=z]{transform:scale(.96)}
.js [data-e=voile]{opacity:1;transform:none;clip-path:inset(0 0 100% 0 round 12px)}
.carte[data-e],.trio li[data-e]{will-change:auto}
.monte{animation:monte .8s var(--ease) both;animation-delay:calc(var(--d,0)*80ms + 80ms)}
@keyframes monte{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}

/* En-tête : fondu dans la photo sur l'accueil, bandeau blanc ailleurs */
.entete{position:sticky;top:0;z-index:40}
body:not(.accueil) .entete:not(.colle)::before{opacity:1;background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.accueil main{margin-top:calc(var(--haut)*-1)}

/* Pictos : tracé marine (Humain. Clair. Constructif.), aplat doré du logo */
.hero__acc{font-size:20px;font-weight:600;color:var(--ocre-f);margin-bottom:18px}

/* Trois services de l'accueil */
.trio li{padding:0 clamp(14px,1.6vw,24px)}
.trio h3{font-size:23px;margin-bottom:10px}
.trio p{margin-bottom:12px}
.trio li{display:flex;flex-direction:column;align-items:flex-start}
.trio .rond{margin:0 0 20px}
.trio .lien{margin-top:auto}
.trio--large{gap:clamp(24px,3.4vw,48px)}
.trio--large li{padding:0}

/* Le fondateur : un message sur blanc */
.message{background:#fff;padding-block:clamp(48px,6vw,88px) clamp(56px,7vw,96px)}
.message__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(36px,5vw,72px);align-items:start}
.message__cote{position:sticky;top:calc(var(--haut) + 24px)}
.message h1{font-size:clamp(32px,3.7vw,52px);margin-bottom:26px}
.message__txt p{margin-bottom:18px}
.message__sig{margin-top:30px}
.message__sig b{display:block;font-weight:700;color:var(--nuit)}

/* Citation de la charte : un temps de respiration dans le message, sur l'ivoire */
.citation{margin:0;padding:clamp(26px,3vw,36px);border-radius:16px;background:var(--ivoire)}
.citation__g{display:block;height:.42em;margin-bottom:16px;font-size:clamp(84px,9vw,120px);font-weight:700;line-height:.82;color:var(--ocre)}
.citation blockquote{margin:0;font-size:clamp(24px,2.5vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.14;color:var(--nuit)}
.citation figcaption{margin-top:14px;font-weight:500;color:var(--ocre-f)}
.citation p{margin:18px 0 0;font-weight:500;color:var(--nuit)}

.avenir{min-height:200px}
.avenir h2{font-size:clamp(28px,3vw,42px);margin-bottom:10px}
@media (hover:hover) and (pointer:fine){.trio li:hover .rond,.sit:hover .rond,.valeurs li:hover .rond,.etape:hover .rond,.carte:hover .rond{transform:translateY(-4px)}}

/* Situations : picto et texte côte à côte, sans cadre */
.situations{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,13fr);gap:clamp(32px,5vw,72px);align-items:start}
.sits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,48px)}
.sit{display:flex;gap:20px;align-items:flex-start}
.sit h3{font-size:21px;line-height:1.25;margin-bottom:8px}

/* Démarche : quatre aplats qui montent vers le marine */
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:20px;overflow:hidden}
.etape{padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,32px) clamp(32px,3.4vw,44px)}
.etape:nth-child(1){background:var(--ivoire)}
.etape:nth-child(2){background:var(--brume-c)}
.etape:nth-child(3){background:var(--brume)}
.etape:nth-child(4){background:var(--nuit);color:#fff}
.etape:nth-child(4) h3{color:#fff}
.etape h3{font-size:24px;margin-bottom:10px}
.etape__liv{margin-top:14px;font-weight:600}

/* Comparateur */
.compare li{display:grid;padding-block:13px}

/* Bandeau titre des pages */
.tete{position:relative;overflow:hidden;background:var(--brume);min-height:clamp(240px,31vw,440px);display:flex;align-items:center}
.tete--bas{min-height:clamp(180px,19vw,270px)}
.tete::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--brume) 26%,rgba(223,231,242,.72) 42%,rgba(223,231,242,.24) 54%,rgba(223,231,242,0) 66%)}

/* Pourquoi ce nom : les deux moitiés du diapason s'accordent à l'entrée */
.diapason{overflow:hidden}
.symbole__g{fill:#fff;transition:transform 1.4s var(--ease)}
.symbole__d{fill:var(--ocre);transition:transform 1.4s var(--ease)}

/* Humain. Clair. Constructif. */
.temps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);text-align:center}
.temps__ligne{position:absolute;left:16.67%;right:16.67%;top:37px;height:2px;background:var(--trait);overflow:hidden}
.temps__ligne i{display:block;width:100%;height:100%;background:var(--ocre);transform:scaleX(0);transform-origin:left}
.temps .rond{position:relative;margin-bottom:18px;border-color:var(--trait);transition:border-color 300ms ease,transform 400ms var(--ease)}
.temps .rond i{background:#9fb0c7;transition:background-color 300ms ease}
.temps__p.actif .rond{border-color:var(--ocre);transform:scale(1.06)}
.temps__p.actif .rond i{background:var(--ocre)}
.temps h3{font-size:clamp(23px,2.2vw,28px);margin-bottom:8px}

/* Nos valeurs */
.valeurs{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,15fr);gap:clamp(28px,4vw,64px);align-items:start}
.valeurs h2{font-size:clamp(30px,3.6vw,50px)}
.valeurs ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,44px) clamp(24px,3.4vw,48px)}
.valeurs h3{font-size:23px;margin-bottom:6px}

/* Écouter. Conseiller. Accompagner. : photo pleine largeur */
.voix{position:relative;overflow:hidden;background:var(--nuit);color:#fff;display:flex;align-items:center;min-height:clamp(420px,44vw,620px)}
.voix .fond{inset:0}
.voix .fond img{object-position:50% 12%}
.voix::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(23,41,67,.94) 0,rgba(23,41,67,.82) 42%,rgba(23,41,67,.28) 78%,rgba(23,41,67,.12) 100%)}
.voix .cadre{position:relative;z-index:2}
.voix blockquote{max-width:620px;padding-block:48px}
.voix blockquote p{font-size:clamp(34px,4.6vw,64px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#fff}
.voix footer{margin-top:26px;font-size:17px}
.voix b{display:block;font-weight:700;color:var(--ocre)}
.voix b a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}



/* Tuiles photo des services */
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.tuiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tuile{border-radius:18px;overflow:hidden;background:var(--nuit)}
.tuile a{position:relative;display:flex;align-items:flex-end;min-height:clamp(380px,36vw,500px);color:#fff}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.tuile a::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(23,41,67,.94) 0,rgba(23,41,67,.72) 38%,rgba(23,41,67,0) 72%)}
.tuile div{position:relative;z-index:2;padding:clamp(22px,2.4vw,32px)}
.tuile h3{color:#fff;font-size:clamp(25px,2.4vw,32px);margin-bottom:8px}
.tuile .lien{margin-top:6px}
@media (hover:hover) and (pointer:fine){.tuile:hover img{transform:scale(1.05)}.tuile:hover .lien svg{transform:translateX(5px)}}

/* Contact */
.contact__g{position:relative}
.suite li{display:flex;gap:20px;padding-block:14px}
.suite h3{font-size:20px;margin-bottom:4px}

.carte__meta span{color:var(--ocre-f);font-weight:600}
.js [data-e].vu{opacity:1;transform:none}
.js [data-e=voile].vu{clip-path:inset(0 round 12px)}

/* Questions : un échange question, réponse */
.echange{display:flex;flex-direction:column;gap:12px}
.echange dt{align-self:flex-end;max-width:84%;padding:13px 20px;border-radius:22px 22px 6px 22px;background:var(--nuit);color:#fff;font-weight:600;line-height:1.4}
.echange dd{display:flex;gap:12px;align-items:flex-end;max-width:92%;margin:0 0 16px}
.echange dd p{padding:14px 20px;border-radius:22px 22px 22px 6px;background:#fff;line-height:1.55}
.echange .symbole{flex:none;width:32px;height:33px;margin-bottom:2px}
.echange .symbole__g{fill:var(--nuit)}
.js .echange dt[data-e]{transform:translateX(24px)}
.js .echange dd[data-e]{transform:translateX(-24px)}
.js .echange [data-e].vu{transform:none}
.echange dd p{padding:14px 20px;border-radius:22px 22px 22px 6px;background:#fff;line-height:1.55}

/* Icônes */
.rond{display:grid;place-items:center;flex:none;width:76px;height:76px;margin:0 auto 22px;border:2px solid var(--ocre);border-radius:50%;background:var(--blanc);transition:transform 320ms var(--ease)}
.rond i{display:block;width:46px;height:46px;background:var(--ocre);-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.sit .rond,.valeurs .rond,.etape .rond,.pile__txt .rond{margin:0 0 16px;width:62px;height:62px;border-width:1.5px}
.sit .rond{margin:0}
.sit .rond i,.valeurs .rond i,.etape .rond i,.pile__txt .rond i{width:36px;height:36px}
.suite .rond,.carte--lien .rond{margin:0;width:52px;height:52px;border-width:1.5px}
.suite .rond i,.carte--lien .rond i{width:28px;height:28px}
.rond--wa svg{width:60%;height:60%;fill:var(--ocre)}

/* Pour qui */
.publics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.publics li{border-top:2px solid var(--ocre);padding-top:18px}
.publics span{font-size:16px;font-weight:600;color:var(--ocre-f)}
.publics h3{font-size:20px;margin:8px 0}

/* Pourquoi ce nom : le diapason et ses ondes */
.accord{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:480px;width:100%;margin-inline:auto}
.accord img{position:relative;width:67.5%;height:auto}
.accord i{position:absolute;inset:0;border:1.5px solid var(--ocre);border-radius:50%;opacity:0;animation:onde 4.5s cubic-bezier(.23,1,.32,1) infinite}
.accord i:nth-child(2){animation-delay:1.5s}
.accord i:nth-child(3){animation-delay:3s}
@keyframes onde{from{transform:scale(.3);opacity:.8}to{transform:scale(1);opacity:0}}

/* Hero : ondes très lentes, à peine perceptibles */
.onde{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;--ox:8vw;--oy:54%;-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 56%);mask-image:linear-gradient(90deg,#000 30%,transparent 56%)}
.onde i{position:absolute;left:var(--ox);top:var(--oy);width:170vmin;height:170vmin;margin:-85vmin 0 0 -85vmin;border:1.5px solid var(--ocre);border-radius:50%;opacity:0;animation:vibration 20s cubic-bezier(.3,.5,.5,1) infinite}
.onde i:nth-child(2){animation-delay:-5s}
.onde i:nth-child(3){animation-delay:-10s}
.onde i:nth-child(4){animation-delay:-15s}
.hors .onde i{animation-play-state:paused}
@keyframes vibration{from{transform:scale(.08);opacity:0}16%{opacity:.26}to{transform:scale(1);opacity:0}}

/* Qui sommes-nous : la photo entière glisse et se pose */
.js [data-e=glisse]:not(.vu){transform:translateX(-56px)}
.js .glisse+div [data-e]:not(.vu){transform:translateX(32px)}



@media (max-width:1180px){
  .services__g,.situations,.valeurs{grid-template-columns:1fr}
  .publics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ent--colle{position:static;margin-bottom:8px}
}
@media (max-width:1280px){
  .hero__fond{width:66%}
  .hero__txt{max-width:44vw}
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.94) 0,rgba(255,255,255,.62) 8%,rgba(255,255,255,0) 20%),linear-gradient(90deg,#fff 0,#fff 40%,rgba(255,255,255,.9) 46%,rgba(255,255,255,0) 60%)}
}
@media (max-width:980px){
  :root{--haut:68px}
  .entete__logo img{width:158px}
  .menu-btn{display:block;z-index:2}
  /* Menu plein écran */
  .js .nav{position:fixed;left:0;right:0;top:var(--haut);bottom:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:28px var(--marge) calc(32px + env(safe-area-inset-bottom));background:#fff;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity 200ms ease,visibility 0s linear 200ms}
  .js .nav.ouvert{visibility:visible;opacity:1;transition:opacity 200ms ease}
  .nav__liens{flex-direction:column;align-items:stretch;gap:0;margin-bottom:24px}
  .nav__liens a{display:block;font-size:clamp(24px,7vw,30px);font-weight:600;padding:14px 0;white-space:normal}
  .js .nav__liens li,.js .nav .btn,.js .nav__tel{opacity:0;transform:translateY(16px);transition:opacity 280ms var(--ease),transform 340ms var(--ease)}
  .js .nav.ouvert li,.js .nav.ouvert .btn,.js .nav.ouvert .nav__tel{opacity:1;transform:none}
  .nav.ouvert li:nth-child(2){transition-delay:40ms}
  .nav.ouvert li:nth-child(3){transition-delay:80ms}
  .nav.ouvert li:nth-child(4){transition-delay:120ms}
  .nav.ouvert li:nth-child(5){transition-delay:160ms}
  .js .nav.ouvert .btn{transition-delay:200ms}
  .js .nav.ouvert .nav__tel{transition-delay:240ms}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav .btn{min-height:54px;font-size:16px}
  .nav__tel{display:block;text-align:center;margin-top:18px;font-weight:600}
  .no-js .menu-btn{display:none}.no-js .entete__int{height:auto;flex-wrap:wrap;padding-block:12px}.no-js .nav{flex-wrap:wrap}
  .hero{align-items:flex-end;padding-top:0}
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.9) 0,rgba(255,255,255,.5) 9%,rgba(255,255,255,0) 18%),linear-gradient(0deg,#fff 0,#fff 36%,rgba(255,255,255,.86) 44%,rgba(255,255,255,0) 60%)}
  .hero__fond{inset:0 0 30% 0;width:100%;height:auto}
  .hero__photo{object-position:62% 30%}
  .hero__txt{padding-block:0 30px}
  .hero__txt{max-width:none}
  .pile__c{min-height:0}
  .une{grid-template-columns:1fr}
  .une__img{min-height:0;aspect-ratio:16/9}
  .deux--faq{grid-template-columns:1fr}
  .deux--faq .ent{margin-bottom:8px}
  .contact,.contact__d{display:block}
  .message__g{grid-template-columns:1fr}
  .message__cote{position:static}
  .contact__d{margin-top:44px}
}
@media (max-width:760px){
  body{font-size:16px}
  .tete{display:block;min-height:0;padding-top:150px}
  .tete::before{display:none}
  .tete .fond{position:relative;width:100%;height:50vw;max-height:300px}
  .tete--bas .fond{height:34vw;max-height:210px}
  .tete>.cadre{position:absolute;left:0;right:0;top:0}
  .sits,.etapes,.tuiles:not(.defile){grid-template-columns:1fr}
  .temps{grid-template-columns:1fr;gap:30px;text-align:left}
  .temps__ligne{left:37px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .temps__ligne i{transform:scaleY(0);transform-origin:top}
  .temps__p{display:grid;grid-template-columns:76px 1fr;column-gap:18px}
  .temps .rond{grid-row:span 2;margin:0}
  .publics{grid-template-columns:1fr;gap:18px}
  .echange dt,.echange dd{max-width:100%}
  .accord{max-width:340px}
  .accord img{width:72%}
  .js [data-e=glisse]:not(.vu),.js .glisse+div [data-e]:not(.vu){transform:translateY(24px)}
  .onde{--ox:16%;--oy:76%;-webkit-mask-image:linear-gradient(0deg,#000 30%,transparent 50%);mask-image:linear-gradient(0deg,#000 30%,transparent 50%)}
  .trio li{background:var(--ivoire);border-radius:16px;padding:24px 20px 14px}
  .deux--inv>.photo{order:-1}
  .voix::before{background:linear-gradient(90deg,rgba(23,41,67,.92),rgba(23,41,67,.62))}
  .tuile a{min-height:360px}
  html{scroll-padding-top:calc(var(--haut) + 12px)}
  /* Carrousels au pouce */
  .defile{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--marge)*-1);padding:6px var(--marge) 26px;scroll-padding-inline:var(--marge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .defile::-webkit-scrollbar{display:none}
  .defile>*{flex:0 0 min(84%,320px);scroll-snap-align:start}
  .js [data-e=d]{transform:translateY(24px)}
  /* Accueil : photo au-dessus, texte dessous */
  .hero h1{font-size:clamp(30px,8.6vw,42px);margin-bottom:14px}
  .hero p{margin-bottom:22px;font-size:16px}
  .hero .btn{width:100%}
  .btn{padding:0 24px}
  .services{padding-block:44px 28px}
  .bande .fond{width:100%;opacity:.42}
  .bande--bord .fond,.bande--fine .fond{width:100%}
  .bande::before,.bande--fine::before,.bande--bord::before{background:linear-gradient(90deg,var(--nuit) 0,rgba(20,48,92,.7) 70%,rgba(20,48,92,.4) 100%)}
  .bande__int,.bande--fine .bande__int,.bande--pile .bande__int{flex-direction:column;align-items:flex-start;gap:22px;min-height:0;padding-block:44px}
  /* Bandeau de page : panneau bleu clair puis photo */
  .tete__txt,.tete--bas .tete__txt{padding-block:0;height:150px;display:flex;flex-direction:column;justify-content:center}
  .tete h1,.tete .tete__rubrique{font-size:clamp(27px,7.6vw,34px);margin-bottom:6px}
  .tete p:not(.tete__rubrique){font-size:clamp(17px,5vw,21px)}
  .deux,.deux--inv,.deux--faq{grid-template-columns:1fr;gap:26px}
  .photo{aspect-ratio:4/3}
  .cartes,.cartes--2{gap:14px}
  .cartes:not(.defile){grid-template-columns:1fr}
  .pile__c{grid-template-columns:1fr;margin-bottom:18px;top:calc(var(--haut) + 10px + var(--n)*8px)}
  .pile__img{order:-1;height:150px;min-height:0}
  .pile__txt{padding:20px}
  .pile__txt .coches li{padding:3px 0;font-size:16px}
  .contact-rapide{margin-top:24px}
  .contact-rapide ul{grid-template-columns:1fr;gap:10px}
  .champs-2{grid-template-columns:1fr}
  form .btn{width:100%}
  .filtres{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--marge)*-1);padding-inline:var(--marge);padding-bottom:4px;scrollbar-width:none}
  .filtres::-webkit-scrollbar{display:none}
  .filtres button{flex:none}
  .pied__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied__marque,.pied__g>div:last-child{grid-column:1/-1}
  .pied__g li a{padding-block:5px}
  .pied__bas .cadre{flex-direction:column}
  .pied__bas a{padding-inline:0 10px}
  .barre-m{position:fixed;z-index:35;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto auto 1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -6px 24px rgba(20,48,92,.12);transform:translateY(110%);transition:transform 320ms var(--ease)}
  .barre-m.visible{transform:none}
  .barre-m a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;font-weight:600;font-size:16px;padding-inline:20px;transition:transform 160ms var(--ease)}
  .barre-m a:active{transform:scale(.97)}
  .barre-m__tel{border:2px solid var(--nuit)}
  .barre-m__cta{background:var(--ocre);color:var(--nuit)}
  .barre-m svg{width:18px;height:12px}
  .barre-m .barre-m__wa{width:48px;padding:0;border:2px solid var(--nuit)}
  .barre-m .barre-m__tel{padding-inline:16px}
  .barre-m .barre-m__cta{gap:8px;padding-inline:10px;white-space:nowrap}
  .barre-m__wa svg{width:22px;height:22px;fill:var(--nuit)}
}
/* Revenir en haut : ocre pour rester visible sur les fonds clairs comme sur le marine */
.haut{position:fixed;z-index:34;right:24px;bottom:24px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--ocre);color:var(--nuit);box-shadow:0 6px 18px rgba(20,48,92,.24);cursor:pointer;visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity 200ms ease,transform 200ms var(--ease),background-color 160ms ease,visibility 0s linear 200ms}
.haut.visible{visibility:visible;opacity:1;transform:none;transition:opacity 200ms ease,transform 200ms var(--ease),background-color 160ms ease}
.haut svg{width:22px;height:22px}
.haut:active{transform:scale(.94)}
.haut:focus-visible{outline:2px solid var(--nuit);outline-offset:3px}
body.menu .haut{visibility:hidden;opacity:0}
@media (hover:hover) and (pointer:fine){.haut:hover{background:#d9b04a}}

/* Téléphone et tablette : en-tête plein, hero en deux temps, photo nette puis texte, sans flou ni fondu */
@media (max-width:980px){
  .entete::before{opacity:1;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--trait)}
  .entete__logo img,.colle .entete__logo img{transform:none}
  .menu-btn{margin-right:-10px;background:none;box-shadow:none;border-radius:10px}
  .js .nav{padding-top:10px}
  .nav__liens{margin-bottom:20px}
  .nav__liens a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--trait)}
  .nav .btn{min-height:50px}
  .nav__tel{display:flex;justify-content:center;gap:24px;font-size:15px;margin-top:6px}
  .nav__tel a{padding-block:12px}
  .onde{display:none}
  .hero{display:block;min-height:0;padding-top:var(--haut)}
  .hero::before{display:none}
  .hero__fond{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1;max-height:56svh;animation:none}
  .hero__photo{object-position:64% 24%}
  .hero__txt{padding-block:26px 38px}
}
@media (max-width:760px){
  .section{padding-block:48px}
  .ent{margin-bottom:24px}
  .hero__acc{font-size:16px;margin-bottom:10px}

  /* Photos : un bloc net, le texte sur un aplat juste dessous */
  .fond img,[data-para]{position:static;display:block;width:100%;height:100%;transform:none!important}
  .bande,.manif,.voix{display:block;min-height:0}
  .bande::before,.manif::before,.voix::before{display:none}
  .bande .fond,.bande--fine .fond,.bande--bord .fond,.manif .fond,.voix .fond{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;opacity:1;transform:none}
  .bande--fine .fond{display:none}
  .bande__int,.bande--fine .bande__int,.bande--pile .bande__int{padding-block:28px 34px;gap:18px}
  .manif .cadre{padding-block:28px 34px}
  .manif__txt{font-size:27px;line-height:1.2}
  .voix blockquote{padding-block:28px 34px}
  .voix blockquote p{font-size:28px}
  .voix footer{margin-top:14px;font-size:16px}
  .tete .fond{height:auto;max-height:none;aspect-ratio:16/9}
  .tete--bas .fond{height:auto;max-height:none;aspect-ratio:2/1}

  /* Tuiles : photo au-dessus, texte sur ivoire */
  .tuile{background:var(--ivoire)}
  .tuile a{display:block;min-height:0;color:var(--nuit)}
  .tuile a::before{display:none}
  .tuile img{position:static;display:block;height:auto;aspect-ratio:16/10}
  .tuile div{padding:18px 18px 10px}
  .tuile h3{color:var(--nuit);font-size:21px}

  /* Icônes : une seule taille partout */
  .rond,.sit .rond,.valeurs .rond,.etape .rond,.pile__txt .rond,.suite .rond,.carte--lien .rond,.temps .rond{width:52px;height:52px;border-width:1.5px}
  .rond i,.sit .rond i,.valeurs .rond i,.etape .rond i,.pile__txt .rond i,.suite .rond i,.carte--lien .rond i{width:30px;height:30px}
  .temps__p{grid-template-columns:52px 1fr;column-gap:14px}
  .temps__ligne{left:25px}
  .temps__p>.btn{grid-column:1/-1;justify-self:start}

  /* Listes à picto : l'icône à gauche, le texte aligné sur une colonne */
  .sit{gap:14px}
  .sits{gap:26px}
  .sit h3{font-size:19px;margin-bottom:4px}
  .trio.defile{display:grid;grid-template-columns:1fr;gap:10px;margin-inline:0;padding:0;overflow:visible;scroll-snap-type:none}
  .trio li,.etape,.valeurs li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-content:start}
  .trio li>*,.etape>*,.valeurs li>*{grid-column:2}
  .trio li>.rond,.etape>.rond,.valeurs li>.rond{grid-column:1;grid-row:1/span 4;margin:0}
  .trio li{padding:18px 18px 8px}
  .trio h3,.etape h3,.valeurs h3{font-size:19px;margin-bottom:4px}
  .trio p{margin-bottom:2px}
  .etape{padding:20px 18px}
  .valeurs ul{grid-template-columns:1fr;gap:22px}

  .pile__c{position:static;grid-template-rows:auto auto;margin-bottom:14px}
  .pile__txt{justify-content:flex-start}

  .js .echange dt[data-e],.js .echange dd[data-e]{transform:translateY(16px)}

  .haut{right:14px;bottom:calc(76px + env(safe-area-inset-bottom));width:46px;height:46px}

  .trio--large li{background:#fff}

  /* Pied de page plus court */
  .pied__marque p{margin-block:12px 14px}
  .pied__bas a{min-height:32px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js [data-e]{opacity:1;transform:none;clip-path:none}
  .accord i,.onde i{animation:none;opacity:.2;transform:scale(.5)}
  .accord i:nth-child(2),.onde i:nth-child(2){transform:scale(.75)}
  .accord i:nth-child(3){transform:scale(1)}
  @view-transition{navigation:none}
}