@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/plex-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/plex-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/plex-600.woff2) format("woff2")}
/* 2RCREATION — socle du site
   Idée : atelier sobre, noir et bleu olympe, le jaune réservé à l'action et au fil de couture. */
:root{
  --noir:#0b0c10;
  --olympe:#0e76a8;
  --ciel:#1a99d0;
  --olympe-nuit:#0a5a82;
  --gris-clair:#eef0f4;
  --gris:#c5cad5;
  --gris-texte:#565c6b;
  --blanc:#ffffff;
  --jaune:#ffd21f;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --texte:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gouttiere:clamp(18px,5vw,56px);
  --large:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--noir);font:400 1.0625rem/1.6 var(--texte)}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
[id]{scroll-margin-top:84px}

.skip{position:absolute;left:-999px;top:0;background:var(--jaune);color:var(--noir);padding:10px 14px;z-index:50}
.skip:focus{left:8px;top:8px}

/* Bandeau et en-tête */
.topbar{display:flex;justify-content:space-between;gap:16px;padding:7px var(--gouttiere);background:var(--noir);color:var(--gris);font-size:.8125rem}
.topbar a{color:var(--blanc);text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px var(--gouttiere);background:var(--blanc);border-bottom:1px solid var(--gris-clair);transition:box-shadow .25s}
.header.est-colle{box-shadow:0 6px 24px rgba(11,12,16,.08)}
.logo{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.25rem;letter-spacing:.02em;text-decoration:none;color:var(--noir);justify-self:center;white-space:nowrap}
.logo img{height:46px;width:auto}
.nav{display:none;gap:26px;align-items:center;font-size:.9375rem;font-weight:500}
.nav a{text-decoration:none}
.nav a:not(.btn){padding:6px 0;border-bottom:2px solid transparent}
.nav a:not(.btn):hover{border-color:var(--jaune)}
.nav--right{justify-self:end}
.burger{justify-self:start;width:44px;height:44px;display:grid;place-content:center;gap:5px;background:none;border:0;padding:0;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--noir);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{grid-column:1/-1;display:grid;padding:6px 0 10px}
.menu[hidden]{display:none}
.menu a{padding:13px 0;border-top:1px solid var(--gris-clair);text-decoration:none;font-weight:500}
.menu a:last-child{color:var(--olympe);font-weight:600}
@media (min-width:900px){
  .burger,.menu{display:none!important}
  .nav{display:flex}
  .logo{font-size:1.5rem}
}

/* Boutons et liens */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:2px;font:600 1rem var(--texte);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn--jaune{background:var(--jaune);color:var(--noir);box-shadow:4px 4px 0 var(--ciel)}
.btn--jaune:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ciel)}
.btn--jaune:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ciel)}
.btn--sm{min-height:42px;padding:0 18px;font-size:.9375rem;box-shadow:3px 3px 0 var(--ciel)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--jaune);padding-bottom:2px}
.link-arrow::after{content:"→";transition:transform .2s}
a.link-arrow:hover::after,a:hover>.link-arrow::after{transform:translateX(5px)}

/* Accueil */
.hero{background:var(--noir);color:var(--blanc);text-align:center;padding:clamp(48px,9vw,104px) var(--gouttiere) clamp(44px,7vw,80px);display:grid;justify-items:center;gap:22px}
.hero__mark{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(2.25rem,11vw,8.25rem);line-height:.9;letter-spacing:-.01em;animation:monte .7s cubic-bezier(.2,.7,.2,1) both}
.hero__mark span{color:var(--jaune)}
.stitch{width:min(600px,82%);height:14px;overflow:visible}
.stitch path{fill:none;stroke:var(--jaune);stroke-width:3;stroke-linecap:round;stroke-dasharray:14 10;clip-path:inset(0 100% 0 0);animation:coud 1.3s .35s cubic-bezier(.5,0,.2,1) forwards}
.hero h1{font-family:var(--display);font-stretch:100%;font-weight:600;font-size:clamp(1.375rem,3.4vw,2.25rem);line-height:1.15;letter-spacing:.01em}
.hero__lead{max-width:58ch;color:var(--gris);font-size:clamp(1rem,1.6vw,1.1875rem)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 30px;margin-top:10px}
.hero .link-arrow{color:var(--blanc)}
@keyframes monte{from{transform:translateY(22px);opacity:.2}to{transform:none;opacity:1}}
@keyframes coud{to{clip-path:inset(0 0 0 0)}}

/* Ruban des techniques */
.ruban{position:relative;z-index:2;background:var(--olympe);color:var(--blanc);overflow:hidden;overflow:clip visible;padding:14px 0;border-block:1px solid var(--olympe-nuit)}
.ruban__piste{display:flex;align-items:center;gap:0;width:max-content;animation:defile 38s linear infinite}
.ruban span{font-family:var(--display);font-stretch:112%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.875rem;padding:0 22px;position:relative;white-space:nowrap}
.ruban span::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:2px;background:var(--jaune)}
@keyframes defile{to{transform:translateX(-50%)}}

/* Blocs */
.bloc{padding:clamp(56px,9vw,112px) var(--gouttiere)}
.bloc>*{max-width:var(--large);margin-inline:auto}
.bloc--gris{background:var(--gris-clair)}
.bloc--olympe{background:var(--olympe);color:var(--blanc)}
.bloc--noir{background:var(--noir);color:var(--blanc)}
.bloc__tete{display:grid;gap:14px;margin-bottom:clamp(30px,5vw,56px)}
.surtitre{font-family:var(--display);font-stretch:112%;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8125rem;color:var(--olympe);display:flex;align-items:center;gap:12px}
.surtitre::before{content:"";width:34px;border-top:3px dashed var(--jaune)}
.bloc--olympe .surtitre,.bloc--noir .surtitre{color:var(--jaune)}
h2{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(1.75rem,4.6vw,3.25rem);line-height:1.04;letter-spacing:-.01em;max-width:20ch}
.chapo{max-width:60ch;color:var(--gris-texte);font-size:1.125rem}
.bloc--noir .chapo{color:var(--gris)}
.chapo a{font-weight:600;text-decoration-color:var(--jaune);text-decoration-thickness:2px;text-underline-offset:4px}

/* Métiers */
.metiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:2px solid var(--noir);border-left:1px solid var(--gris)}
.metier{position:relative;display:grid;grid-template-rows:auto 1fr auto auto;gap:14px;padding:28px 26px 30px;border-right:1px solid var(--gris);border-bottom:1px solid var(--gris);background:var(--blanc);transition:background .25s,color .25s}
.metier::before{content:"";position:absolute;left:26px;right:26px;top:-2px;border-top:3px dashed var(--jaune);clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.5,0,.2,1)}
.metier:hover,.metier:focus-within{background:var(--olympe);color:var(--blanc)}
.metier:hover::before,.metier:focus-within::before{clip-path:inset(0 0 0 0)}
.metier h3{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:1.5rem;line-height:1.1}
.metier p{color:var(--gris-texte);font-size:1rem;transition:color .25s}
.metier:hover p,.metier:focus-within p{color:#e6f3fa}
.metier ul{display:flex;flex-wrap:wrap;gap:6px 8px}
.metier li{font-size:.8125rem;font-weight:500;padding:3px 10px;border:1px solid currentColor;border-radius:99px;opacity:.75}
.metier .link-arrow{justify-self:start;margin-top:6px}

/* Méthode */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:34px 28px}
.etapes li{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:3px dashed var(--jaune)}
.etapes__n{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:3rem;line-height:1;color:var(--jaune);font-variant-numeric:tabular-nums}
.etapes h3{font-family:var(--display);font-stretch:108%;font-weight:700;font-size:1.25rem;line-height:1.2}
.etapes p{color:#e6f3fa;font-size:1rem}

/* Réalisations */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(46%,260px),1fr));gap:14px}
.vue{display:grid;gap:8px}
.vue__vide{aspect-ratio:4/5;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--gris-clair) 0 14px,#e4e7ed 14px 28px);border:1px dashed var(--gris);color:var(--gris-texte);font-size:.875rem;font-weight:500;text-align:center;padding:10px}
.vue img{aspect-ratio:1;object-fit:cover;width:100%;height:auto}
.vue figcaption{font-family:var(--display);font-stretch:112%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem}

/* Marques */
.marques{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px}
.marque{display:grid;gap:14px;align-content:start;padding:30px 28px;background:var(--blanc);border-left:6px solid var(--olympe);text-decoration:none;transition:transform .2s,box-shadow .2s}
.marque:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,90,130,.16)}
.marque h3{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:1.625rem}
.marque p{color:var(--gris-texte)}
.marque .link-arrow{justify-self:start}

/* Devis */
.devis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:44px clamp(32px,6vw,80px);align-items:start}
.devis__texte{display:grid;gap:16px}
.coord{display:grid;gap:0;margin-top:14px;border-top:1px solid #2a2d38}
.coord>div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid #2a2d38}
.coord dt{font-family:var(--display);font-stretch:112%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:var(--gris);padding-top:4px}
.coord dd{font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.coord a{text-decoration-color:var(--jaune);text-decoration-thickness:2px;text-underline-offset:4px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--blanc);color:var(--noir);padding:clamp(22px,4vw,36px);border-top:6px solid var(--jaune)}
.champ{grid-column:1/-1;display:grid;gap:6px}
.champ label{font-weight:600;font-size:.9375rem}
.champ label span{font-weight:400;color:var(--gris-texte)}
.champ input,.champ select,.champ textarea{width:100%;font:inherit;color:inherit;background:var(--gris-clair);border:1px solid transparent;border-bottom:2px solid var(--gris);border-radius:0;padding:12px 14px;min-height:50px}
.champ textarea{resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:0;background:var(--blanc);border-color:var(--olympe)}
@media (min-width:560px){.champ--demi{grid-column:auto}}
.form .btn{grid-column:1/-1;justify-self:start;margin-top:4px}
.form__note,.form__retour{grid-column:1/-1;font-size:.875rem;color:var(--gris-texte)}
.form__retour{padding:12px 14px;background:var(--gris-clair);border-left:4px solid var(--olympe);color:var(--noir);font-weight:500}
.form__retour[hidden]{display:none}
.piege{position:absolute;left:-9999px}

/* Pied */
.pied{background:var(--noir);color:var(--gris);padding:48px var(--gouttiere) 26px;border-top:1px solid #2a2d38;font-size:.9375rem}
.pied__grille{max-width:var(--large);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:32px}
.pied__grille>div{display:grid;gap:12px;align-content:start}
.pied h2{font-family:var(--display);font-stretch:112%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--blanc);max-width:none}
.pied a{color:var(--blanc);text-underline-offset:4px;text-decoration-color:#4a4f5e}
.pied a:hover{text-decoration-color:var(--jaune)}
.logo--pied{color:var(--blanc);justify-self:start}
.logo--pied{display:flex;align-items:center;gap:12px}
.pied__bas{max-width:var(--large);margin:36px auto 0;padding-top:18px;border-top:1px solid #2a2d38;font-size:.8125rem}

/* Apparition au défilement : l'état de repos reste lisible */
.js .reveal{opacity:.25;transform:translateY(22px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.est-vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stitch path{clip-path:none}
  .js .reveal{opacity:1;transform:none}
}

/* Logo et mascotte */
.hero__logo{width:min(250px,52vw);height:auto;animation:monte .7s cubic-bezier(.2,.7,.2,1) both}
@media (min-width:900px){.logo img{height:52px}.hero__logo{width:290px}}
.mascotte{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:6px 14px;margin-top:10px}
.mascotte img{width:100%;height:auto;transform-origin:50% 92%;will-change:translate,rotate,scale;animation:blu-flotte 4.2s cubic-bezier(.45,.05,.55,.95) infinite alternate,blu-balance 6.4s cubic-bezier(.45,.05,.55,.95) infinite alternate,blu-respire 3.1s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.bulle{position:relative;background:var(--gris-clair);border-left:4px solid var(--jaune);padding:14px 16px;font-size:.9375rem;max-width:38ch}
.bulle::before{content:"";position:absolute;left:-14px;top:50%;margin-top:-8px;border:8px solid transparent;border-right-color:var(--jaune)}
@keyframes blu-flotte{from{translate:0 3px}to{translate:0 -9px}}
@keyframes blu-balance{from{rotate:-2.2deg}to{rotate:2.2deg}}
@keyframes blu-respire{from{scale:1 1}to{scale:1.012 .988}}
@keyframes blu-tete{from{translate:0 1px;rotate:-4deg}to{translate:0 -2px;rotate:4deg}}
@media (min-width:900px){
  .bloc__tete--mascotte{grid-template-columns:1fr auto;column-gap:48px;align-items:end}
  .bloc__tete--mascotte>:not(.mascotte){grid-column:1}
  .mascotte{grid-column:2;grid-row:1/span 3;grid-template-columns:1fr;justify-items:center;width:230px;margin:0}
  .mascotte__blu{width:190px;order:2}
  .bulle{order:1;border-left:0;border-bottom:4px solid var(--jaune)}
  .bulle::before{left:50%;top:auto;bottom:-20px;margin:0 0 0 -8px;border-color:transparent;border-top-color:var(--jaune)}
}
.bulle-flottante{position:fixed;right:14px;bottom:14px;z-index:30;display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;background:var(--blanc);color:var(--noir);border:2px solid var(--noir);border-radius:99px;box-shadow:4px 4px 0 var(--jaune);text-decoration:none;font-size:.8125rem;line-height:1.25;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.bulle-flottante img{width:48px;height:48px;border-radius:50%;object-fit:cover;animation:blu-tete 3.4s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.bulle-flottante b{display:block;font-size:.875rem}
.bulle-flottante:hover{transform:translateY(-3px)}
.bulle-flottante.est-cache{opacity:0;transform:translateY(90px);pointer-events:none}

.hero__avis{font-size:.9375rem;margin-top:6px}
.hero__avis a{color:var(--blanc);text-decoration-color:var(--jaune);text-decoration-thickness:2px;text-underline-offset:5px}
.hero__avis span{color:var(--jaune);letter-spacing:2px;margin-right:6px}

/* Pages légales */
.header--simple{grid-template-columns:1fr auto 1fr}
.legal>div{max-width:720px;display:grid;gap:14px}
.legal h1{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(1.75rem,4.6vw,2.75rem);line-height:1.05;margin-bottom:8px}
.legal h2{font-size:1.25rem;font-stretch:108%;font-weight:700;max-width:none;margin-top:18px;padding-top:16px;border-top:3px dashed var(--jaune)}
.legal p{color:#2b2e37}
.legal p a:not(.link-arrow){text-decoration-color:var(--jaune);text-decoration-thickness:2px;text-underline-offset:4px}
.legal .link-arrow{margin-top:20px}

/* Pages métiers, FAQ */
.metier h3 a{text-decoration:none}
.metier h3 a::after{content:"";position:absolute;inset:0}
.metier .link-arrow{position:relative;z-index:1}
.fil{font-size:.875rem;color:var(--gris-texte)}
.fil a{text-underline-offset:3px}
.page-metier>div{max-width:820px;display:grid;gap:16px}
.page-metier h1{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(1.9rem,5vw,3.25rem);line-height:1.04}
.page-metier h2{font-size:clamp(1.3rem,3vw,1.75rem);max-width:none;margin-top:22px;padding-top:18px;border-top:3px dashed var(--jaune)}
.page-metier .chapo{color:#2b2e37}
.liste{display:grid;gap:10px}
.liste li{padding-left:26px;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:.7em;width:14px;border-top:3px solid var(--ciel)}
.appel{background:var(--noir);color:var(--blanc);padding:26px;display:grid;gap:14px;justify-items:start;margin-top:22px}
.appel p{color:var(--gris)}
.autres{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:6px}
.autres a{font-size:.875rem;font-weight:500;padding:6px 14px;border:1px solid var(--gris);border-radius:99px;text-decoration:none}
.autres a:hover{border-color:var(--noir);background:var(--gris-clair)}
.faq{display:grid;gap:0;border-top:2px solid var(--noir);max-width:820px;margin-inline:0 auto}
.faq details{border-bottom:1px solid var(--gris);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;font-family:var(--display);font-stretch:108%;font-weight:700;font-size:1.125rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--olympe);transition:rotate .25s}
.faq details[open] summary::after{rotate:45deg}
.faq p{padding:0 0 18px;color:var(--gris-texte);max-width:65ch}
.pied__liens{display:flex;flex-wrap:wrap;gap:6px 18px;max-width:var(--large);margin:28px auto 0}

/* Blu B Boy : interactions */
.mascotte__blu{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent;transition:scale .25s cubic-bezier(.3,1.6,.5,1)}
.mascotte__blu:hover{scale:1.05}
.mascotte__blu.saute{animation:blu-saut .7s cubic-bezier(.3,.7,.3,1)}
@keyframes blu-saut{0%{translate:0 0;scale:1 1}18%{translate:0 4px;scale:1.08 .9}45%{translate:0 -34px;scale:.95 1.07}72%{translate:0 0;scale:1.06 .93}100%{translate:0 0;scale:1 1}}
.bulle.change{animation:bulle-pop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes bulle-pop{from{scale:.94;opacity:.4}to{scale:1;opacity:1}}
/* il pousse le ruban des techniques */
.ruban__blu{flex:none;height:62px;width:auto;margin:-26px 26px -10px -4px;transform-origin:50% 100%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.18));animation:blu-pousse .62s cubic-bezier(.45,.05,.55,.95) infinite alternate}
@keyframes blu-pousse{from{rotate:-9deg;translate:0 0}to{rotate:-15deg;translate:-3px -5px}}
/* il pousse le titre de la méthode */
.pousse{display:flex;align-items:flex-end;gap:14px}
.pousse__blu{flex:none;width:58px;height:auto;margin-bottom:2px;transform-origin:50% 100%}
.js .pousse h2,.js .pousse__blu{transition:translate 1.25s cubic-bezier(.3,.75,.25,1),opacity .6s}
.js .pousse:not(.est-vu) h2{translate:-46px 0;opacity:.35}
.js .pousse:not(.est-vu) .pousse__blu{translate:-120px 0;opacity:.35}
.js .pousse.est-vu .pousse__blu{animation:blu-marche .3s cubic-bezier(.45,.05,.55,.95) 4 alternate,blu-salue 3.8s 1.4s cubic-bezier(.45,.05,.55,.95) infinite alternate}
@keyframes blu-marche{from{rotate:6deg}to{rotate:14deg}}
@keyframes blu-salue{from{rotate:-4deg}to{rotate:5deg}}
@media (min-width:900px){.ruban__blu{height:74px;margin-top:-34px}.pousse__blu{width:78px}}
@media (prefers-reduced-motion:reduce){.js .pousse:not(.est-vu) h2,.js .pousse:not(.est-vu) .pousse__blu{translate:none;opacity:1}}

/* Photos Instagram : broderie et atelier */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.photos img{width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.faq-zone{display:grid;gap:28px;align-items:start}
.faq__photo{display:grid;gap:8px;max-width:420px}
.faq__photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.faq__photo figcaption{font-family:var(--display);font-stretch:112%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem}
@media (min-width:900px){.faq-zone{grid-template-columns:minmax(0,340px) 1fr;gap:56px}.faq{max-width:none}.faq__photo img{aspect-ratio:4/5}}

.photos--cartes{grid-template-columns:repeat(2,1fr)}
.photos--cartes img{aspect-ratio:auto;height:auto;border:1px solid var(--gris)}
@media (max-width:560px){.photos{grid-template-columns:repeat(2,1fr)}}

.video-metier{display:grid;gap:8px;max-width:420px;margin-top:8px}
.video-metier video{width:100%;height:auto;aspect-ratio:9/10;background:var(--noir);display:block}
.video-metier figcaption{font-family:var(--display);font-stretch:112%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem}

/* Logos des marques et bandeau clients */
.marque__logo{height:84px;width:auto;justify-self:start}
.clients__liste{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.clients__liste a{display:block;width:clamp(92px,22vw,132px);background:var(--blanc);border:1px solid var(--gris);padding:8px;transition:translate .25s,border-color .25s,box-shadow .25s}
.clients__liste img{width:100%;height:auto;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.clients__liste a:hover,.clients__liste a:focus-visible{translate:0 -4px;border-color:var(--olympe);box-shadow:4px 4px 0 var(--jaune)}
.clients__liste a:hover img,.clients__liste a:focus-visible img,.clients__liste a:active img{filter:none;opacity:1}

.sites{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.site{display:grid;gap:8px;text-decoration:none;transition:translate .25s}
.site:hover{translate:0 -4px}
.site img{width:100%;height:auto;border:1px solid var(--gris);box-shadow:4px 4px 0 var(--jaune)}
.site span{display:grid;font-size:.875rem;color:var(--gris-texte)}
.site strong{color:var(--noir);font-family:var(--display);font-stretch:108%;font-size:1rem}