/* ==========================================================
   AS EXPERTISES — Feuille de style
   Charte tirée du logo : rouge flamme, noir charbon, blanc.
   Pour changer les couleurs ou les polices, modifiez :root.
   ========================================================== */

:root{
  /* Couleurs du logo */
  --rouge:#D61E26;
  --rouge-fonce:#A9151B;
  --rouge-vif:#F0343B;          /* rouge lisible sur fond sombre */
  --charbon:#1B1B1F;
  --ardoise:#2A2C33;
  /* Neutres */
  --brume:#EEF2F6;
  --trait:#D9DEE5;
  --texte:#23252B;
  --texte-doux:#565B66;
  --sortie:#1E9E5A;             /* vert des panneaux de sortie (plan d'évacuation) */
  /* Polices */
  --f-titre:"Archivo","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-texte:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* Rythme */
  --section:clamp(3.5rem,7vw,6rem);
  --coupe:56px;                 /* hauteur de la coupe en biais (rappel du bouclier) */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.65 var(--f-texte);color:var(--texte);background:#fff;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--f-titre);font-stretch:112%;font-weight:800;line-height:1.14;margin:0 0 .55em;color:var(--charbon);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.5rem)}
h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.5rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em;text-wrap:pretty}

.ic{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.conteneur{width:min(1160px,100% - 2.5rem);margin-inline:auto}

:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.heros :focus-visible,.titre-page :focus-visible,.section--sombre :focus-visible,.pied :focus-visible,.bandeau :focus-visible,.topbar :focus-visible{outline-color:#fff}
.evitement{position:absolute;left:1rem;top:-4rem;background:var(--rouge);color:#fff;padding:.7rem 1rem;z-index:100;font-weight:700}
.evitement:focus{top:1rem}

/* ---------- Barre supérieure ---------- */
.topbar{background:var(--charbon);color:#cfd3da;font-size:.875rem}
.topbar .conteneur{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.55rem}
.topbar ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;margin:0;padding:0}
.topbar li{display:flex;align-items:center;gap:.5rem}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar .ic{width:1rem;height:1rem;color:var(--rouge-vif)}

/* ---------- En-tête ---------- */
.entete{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--trait);transition:box-shadow .2s}
.entete.defile{box-shadow:0 6px 24px rgba(27,27,31,.10)}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:78px}
.marque{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.marque img{height:48px;width:auto}
.marque-nom{font:800 1.3rem/1 var(--f-titre);font-stretch:118%;letter-spacing:.02em;color:var(--charbon);white-space:nowrap}
.marque-nom b{color:var(--rouge);font-weight:800}
.nav ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav a:not(.bouton){display:block;position:relative;padding:.6rem .8rem;text-decoration:none;font-weight:700;font-size:.98rem;color:var(--charbon)}
.nav a:not(.bouton):hover{color:var(--rouge)}
.nav a[aria-current="page"]:not(.bouton)::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.1rem;height:3px;background:var(--rouge)}
.nav .bouton{margin-left:.75rem;padding:.75rem 1.15rem;font-size:.95rem}
.bascule{display:none;background:none;border:2px solid var(--charbon);color:var(--charbon);padding:.5rem;cursor:pointer}
.bascule .ic{width:1.5rem;height:1.5rem}
.bascule .i-fermer{display:none}
.bascule[aria-expanded="true"] .i-menu{display:none}
.bascule[aria-expanded="true"] .i-fermer{display:block}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.5rem;font:700 1rem/1.2 var(--f-texte);text-decoration:none;border:2px solid var(--rouge);background:var(--rouge);color:#fff;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.bouton:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.bouton .ic{width:1.15rem;height:1.15rem}
.bouton--contour{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.bouton--contour:hover{background:#fff;color:var(--charbon);border-color:#fff}
.bouton--noir{background:transparent;color:var(--charbon);border-color:var(--charbon)}
.bouton--noir:hover{background:var(--charbon);color:#fff;border-color:var(--charbon)}
.bouton--blanc{background:#fff;color:var(--rouge-fonce);border-color:#fff}
.bouton--blanc:hover{background:var(--charbon);color:#fff;border-color:var(--charbon)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- Tuile pictogramme (rappel des panneaux de sécurité) ---------- */
.tuile{display:grid;place-items:center;width:3.25rem;height:3.25rem;background:var(--rouge);color:#fff;flex:none}
.tuile .ic{width:1.7rem;height:1.7rem}
.tuile--noir{background:var(--charbon)}

/* ---------- Sections ---------- */
.section{padding-block:var(--section)}
.section--brume{background:var(--brume)}
.section--sombre{background:var(--charbon);color:#d5d9e0}
.section--sombre h2,.section--sombre h3{color:#fff}
.apres-coupe{padding-top:calc(var(--section) + var(--coupe))}
.entete-section{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.entete-section p{color:var(--texte-doux);font-size:1.125rem;margin:0}
.section--sombre .entete-section p{color:#b9bfc9}

/* Trame « plan » utilisée dans le hero et les titres de page */
.trame{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:24px 24px}

/* ---------- Hero ---------- */
.heros{background-color:var(--charbon);color:#fff;position:relative;z-index:1;
  padding-block:clamp(3rem,6vw,5rem) calc(clamp(3rem,6vw,5rem) + var(--coupe));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--coupe)),0 100%);
  margin-bottom:calc(var(--coupe) * -1)}
.heros .grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.heros h1{color:#fff;margin-bottom:.6em}
.heros .chapeau{font-size:1.15rem;color:#c9ced6;max-width:34rem;margin-bottom:1.75rem}
.domaines{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none;padding:0;margin:2.25rem 0 0}
.domaines li{display:flex;align-items:center;gap:.65rem;font-weight:700;color:#e6e9ee}
.domaines .tuile{width:2.4rem;height:2.4rem}
.domaines .tuile .ic{width:1.25rem;height:1.25rem}

.cadre-plan{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.035);padding:1rem 1rem .85rem}
.plan{width:100%;height:auto}
.plan .mur{fill:none;stroke:#dfe4ea;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter}
.plan .piece{font:700 14px var(--f-texte);fill:#8f98a6}
.plan .route{fill:none;stroke:var(--rouge-vif);stroke-width:4;stroke-dasharray:10 10;stroke-linecap:round;stroke-linejoin:round;animation:marche 1.1s linear infinite}
.plan .picto{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plan .bulle{font:700 15px var(--f-texte);fill:var(--charbon)}
.plan .panneau{font:800 14px var(--f-titre);fill:#fff;letter-spacing:.04em}
.plan .rassemblement{font:700 13px var(--f-texte);fill:#cfd5dd}
@keyframes marche{to{stroke-dashoffset:-20}}
.legende{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;list-style:none;margin:.75rem 0 0;padding:.75rem 0 0;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem;color:#b9bfc9}
.legende li{display:flex;align-items:center;gap:.5rem}
.legende i{display:inline-block;flex:none}
.l-route{width:1.6rem;border-top:3px dashed var(--rouge-vif)}
.l-ext{width:.85rem;height:.85rem;background:var(--rouge)}
.l-sortie{width:.85rem;height:.85rem;background:var(--sortie)}
.legende-pied{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:#8f98a6;margin-top:.5rem}

/* ---------- Titre de page (pages intérieures) ---------- */
.titre-page{--coupe:40px;background-color:var(--charbon);color:#fff;position:relative;z-index:1;
  padding-block:clamp(2.5rem,5vw,3.75rem) calc(clamp(2.5rem,5vw,3.75rem) + var(--coupe));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--coupe)),0 100%);
  margin-bottom:calc(var(--coupe) * -1)}
.titre-page h1{color:#fff;font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);margin:.35rem 0 .7rem}
.titre-page p{max-width:42rem;color:#c9ced6;font-size:1.125rem;margin:0}
.fil{font-size:.9rem;color:#aeb4bf}
.fil a{text-decoration:none}
.fil a:hover{color:#fff;text-decoration:underline}
.apres-titre{padding-top:calc(var(--section) + 40px)}

/* ---------- Liste des métiers (accueil) ---------- */
.metiers{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.metiers .intro{position:sticky;top:110px}
.metiers .intro p{color:var(--texte-doux);font-size:1.125rem}
.liste-metiers{list-style:none;margin:0;padding:0;border-top:2px solid var(--charbon)}
.liste-metiers li{border-bottom:1px solid var(--trait)}
.ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.25rem;align-items:start;padding:1.5rem 1rem;text-decoration:none;color:inherit;transition:background .15s}
.ligne:hover{background:var(--brume)}
.ligne h3{font-size:1.3rem;margin-bottom:.35rem}
.ligne p{margin:0;color:var(--texte-doux)}
.ligne .fleche{align-self:center;color:var(--rouge);transition:transform .15s}
.ligne:hover .fleche{transform:translateX(5px)}

/* ---------- Méthode en étapes ---------- */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;position:relative}
.etapes::before{content:"";position:absolute;top:1.6rem;left:1.6rem;right:0;border-top:3px dashed var(--rouge)}
.etapes li{position:relative}
.etapes .n{display:grid;place-items:center;width:3.25rem;height:3.25rem;background:var(--charbon);color:#fff;font:800 1.25rem var(--f-titre);position:relative;margin-bottom:1.25rem;outline:8px solid var(--brume)}
.etapes h3{margin-bottom:.4rem}
.etapes p{color:var(--texte-doux);margin:0}

/* ---------- Trois piliers ---------- */
.piliers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.pilier .tuile{margin-bottom:1.25rem}
.pilier p{color:var(--texte-doux);margin:0}

/* ---------- Formations (bloc sombre) ---------- */
.grille-form{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.grille-form .texte p{color:#b9bfc9;font-size:1.125rem}
.billets{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.billet{display:grid;grid-template-columns:6.5rem minmax(0,1fr);background:var(--ardoise)}
.billet .code{display:grid;place-items:center;background:var(--rouge);color:#fff;font:800 1.1rem var(--f-titre);font-stretch:118%;padding:1rem .5rem}
.billet div{padding:1rem 1.25rem}
.billet h3{font-size:1.05rem;margin:0 0 .15rem;color:#fff}
.billet p{margin:0;color:#b9bfc9;font-size:.95rem}

/* ---------- Secteurs & zones ---------- */
.deux-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem)}
.pastilles{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.pastilles li{padding:.45rem .9rem;background:#fff;border:1px solid var(--trait);font-weight:700;font-size:.95rem}
.section--brume .pastilles li{border-color:#cfd6df}
.sous-titre{font-size:1.15rem;margin-bottom:1rem}

/* ---------- Bandeau d'appel ---------- */
.bandeau{background:var(--rouge);color:#fff;position:relative;overflow:hidden;padding-block:clamp(2.75rem,5vw,4rem)}
.bandeau .filigrane{position:absolute;right:-2%;top:50%;height:150%;width:auto;transform:translateY(-50%);opacity:.13;pointer-events:none}
.bandeau .conteneur{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
.bandeau h2{color:#fff;margin-bottom:.4rem;font-size:clamp(1.5rem,1rem + 1.8vw,2.2rem)}
.bandeau p{margin:0;font-size:1.1rem;color:#ffe6e7}

/* ---------- Blocs de services (page Services) ---------- */
.bloc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-block:var(--section);border-bottom:1px solid var(--trait)}
.bloc:last-of-type{border-bottom:0}
.bloc .gauche{position:sticky;top:110px}
.bloc .gauche .tuile{margin-bottom:1.25rem}
.bloc .gauche p{color:var(--texte-doux)}
.grille-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16.5rem),1fr));padding:1px 0 0 1px}
.item{background:#fff;padding:1.5rem;border:1px solid var(--trait);margin:-1px 0 0 -1px}
.item .ic{color:var(--rouge);width:1.7rem;height:1.7rem;margin-bottom:.9rem}
.item h3{font-size:1.08rem;margin-bottom:.4rem}
.item p{margin:0;color:var(--texte-doux);font-size:.98rem}
.sous-bloc{margin-top:2.5rem}
.sous-bloc h3{font-size:1.15rem;margin-bottom:1rem}
.coches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.6rem 1.5rem}
.coches li{display:flex;gap:.6rem;align-items:flex-start}
.coches .ic{width:1.15rem;height:1.15rem;margin-top:.3rem;color:var(--rouge);stroke-width:2.6}

/* ---------- Formations (page) ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.filtres button{font:700 .98rem var(--f-texte);padding:.6rem 1.1rem;border:2px solid var(--charbon);background:#fff;color:var(--charbon);cursor:pointer}
.filtres button:hover{background:var(--brume)}
.filtres button[aria-pressed="true"]{background:var(--charbon);color:#fff}
.etiquette{display:inline-block;font:700 .8rem/1 var(--f-texte);padding:.4rem .6rem;background:var(--brume);color:var(--charbon);margin-bottom:.9rem}
.formation .public{margin-top:.9rem;font-size:.92rem;color:var(--texte-doux);padding-top:.7rem;border-top:1px solid var(--trait)}
.formation .public b{color:var(--charbon)}
.encart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:3rem}
.encart>div{display:flex;gap:1rem;align-items:flex-start}
.encart .ic{color:var(--rouge);width:1.9rem;height:1.9rem}
.encart h3{font-size:1.05rem;margin-bottom:.25rem}
.encart p{margin:0;color:var(--texte-doux);font-size:.98rem}

/* ---------- Équipements ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait)}
.duo>div{background:#fff;padding:clamp(1.5rem,3vw,2.25rem)}
.duo h3{margin-bottom:.5rem}
.duo p{margin:0;color:var(--texte-doux)}

/* ---------- À propos ---------- */
.embleme{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.embleme .vignette{background:var(--brume);display:grid;place-items:center;padding:clamp(2rem,4vw,3rem)}
.embleme .vignette img{width:min(100%,380px);height:auto}
.valeurs{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.9rem}
.valeurs li{display:flex;gap:.9rem;align-items:flex-start}
.valeurs .tuile{width:2.5rem;height:2.5rem}
.valeurs .tuile .ic{width:1.3rem;height:1.3rem}
.valeurs b{display:block;color:var(--charbon)}

/* ---------- Contact ---------- */
.contact-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.formulaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.formulaire .plein{grid-column:1 / -1}
.formulaire label{display:block;font-weight:700;margin-bottom:.35rem;color:var(--charbon)}
.formulaire input,.formulaire select,.formulaire textarea{width:100%;font:400 1rem var(--f-texte);padding:.8rem .9rem;border:2px solid #c3cad4;background:#fff;color:var(--texte);border-radius:0}
.formulaire textarea{min-height:9rem;resize:vertical}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(214,30,38,.18)}
.formulaire .piege{position:absolute;left:-9999px}
.aide{font-size:.9rem;color:var(--texte-doux)}
.statut{margin:.25rem 0 0;font-weight:700}
.statut.ok{color:#16743f}.statut.err{color:var(--rouge-fonce)}
.coordonnees{background:var(--charbon);color:#d5d9e0;padding:clamp(1.5rem,3vw,2.25rem)}
.coordonnees h2{color:#fff;font-size:1.4rem}
.coordonnees ul{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:1.1rem}
.coordonnees li{display:flex;gap:.9rem;align-items:flex-start}
.coordonnees .ic{color:var(--rouge-vif);margin-top:.2rem}
.coordonnees small{display:block;color:#9aa2af;font-size:.85rem}
.coordonnees a{text-decoration:none;font-weight:700;color:#fff}
.coordonnees a:hover{text-decoration:underline}
.texte-long{max-width:46rem}
.texte-long h2{font-size:1.5rem;margin-top:2.25rem}
.texte-long p,.texte-long li{color:var(--texte)}

/* ---------- Emplacements photo ----------
   Chaque emplacement a une taille recommandée ; l'image la remplit et
   est recadrée automatiquement (object-fit: cover), pas besoin de la
   redimensionner au pixel près avant de l'importer. */
.photo{width:100%;display:block;background:var(--ardoise);object-fit:cover;margin-bottom:1.25rem}
.photo-bloc{aspect-ratio:4/3.1}
.photo-large{aspect-ratio:16/9.5;margin-bottom:0}
.photo-carre{aspect-ratio:1/1}
figure.photo-cadre{margin:0}
figure.photo-cadre figcaption{font-size:.85rem;color:var(--texte-doux);margin-top:.6rem}
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait);margin-top:2.5rem}
.galerie img{aspect-ratio:1/1;width:100%;object-fit:cover;display:block}
.embleme .vignette.avec-photo{padding:0;background:none}
.embleme .vignette.avec-photo img{aspect-ratio:4/3.4;width:100%}

/* ---------- Pied de page ---------- */
.pied{background:var(--charbon);color:#b9bfc9;padding-top:clamp(3rem,5vw,4.25rem);font-size:.98rem}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.5rem}
.pied h2{font-size:1rem;color:#fff;margin-bottom:1rem;letter-spacing:.01em}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pied a{text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied .marque{margin-bottom:1rem}
.pied .marque img{height:56px}
.pied .marque-nom{color:#fff}
.pied .marque-nom b{color:var(--rouge-vif)}
.pied .contact li{display:flex;gap:.7rem;align-items:flex-start}
.pied .contact .ic{color:var(--rouge-vif);width:1.15rem;height:1.15rem;margin-top:.28rem}
.reseaux{display:flex;gap:.6rem;margin-top:1.1rem}
.reseaux a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid #444852;font-weight:800;font-size:.85rem}
.reseaux a:hover{background:var(--rouge);border-color:var(--rouge);color:#fff;text-decoration:none}
.pied-bas{border-top:1px solid #34363d;margin-top:clamp(2.5rem,4vw,3.5rem);padding-block:1.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;font-size:.9rem}

/* ---------- Adaptation aux écrans ---------- */
@media (max-width:1020px){
  .pied-grille{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem}
  .etapes::before{display:none}
}
@media (max-width:900px){
  .bascule{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--trait);box-shadow:0 14px 24px rgba(27,27,31,.12);display:none}
  .nav.ouvert{display:block}
  .nav ul{flex-direction:column;align-items:stretch;padding:.75rem 1.25rem 1.25rem;gap:0}
  .nav a:not(.bouton){padding:.9rem .25rem;border-bottom:1px solid var(--trait)}
  .nav a[aria-current="page"]:not(.bouton)::after{left:.25rem;right:auto;width:2rem;bottom:.35rem}
  .nav .bouton{margin:1rem 0 0}
  .heros .grille,.metiers,.grille-form,.deux-col,.bloc,.embleme,.contact-grille{grid-template-columns:minmax(0,1fr)}
  .metiers .intro,.bloc .gauche{position:static}
  .piliers,.encart{grid-template-columns:minmax(0,1fr)}
  .duo{grid-template-columns:minmax(0,1fr)}
  .bandeau .conteneur{grid-template-columns:minmax(0,1fr)}
  .bandeau .filigrane{height:150%;opacity:.1}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{--coupe:36px}
  .titre-page{--coupe:28px}
  .apres-titre{padding-top:calc(var(--section) + 28px)}
  .topbar .conteneur{justify-content:center}
  .topbar .masque-mobile{display:none}
  .marque img{height:40px}
  .marque-nom{font-size:1.05rem}
  .etapes{grid-template-columns:minmax(0,1fr)}
  .etapes li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.1rem}
  .etapes .n{grid-row:span 2;margin:0}
  .pied-grille{grid-template-columns:minmax(0,1fr)}
  .formulaire{grid-template-columns:minmax(0,1fr)}
  .ligne{grid-template-columns:auto minmax(0,1fr);padding-inline:.25rem}
  .ligne .fleche{display:none}
  .billet{grid-template-columns:5rem minmax(0,1fr)}
  .actions .bouton{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .plan .route{animation:none}
}
@media print{
  .topbar,.entete,.bandeau,.pied nav{display:none}
  .heros,.titre-page{clip-path:none;margin:0}
}