@font-face{font-family:"Fraunces";src:url("/assets/fonts/Fraunces.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"RsSerif";src:url("/assets/fonts/SourceSerif4.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Orbitron";src:url("/assets/fonts/Orbitron.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{--creme:#F5F2EA;--encre:#1A1815;--gris:#6E675A;--filet:#DAD3C4;--rouge:#EB2933;--panneau:#FBFAF6;--titre:"Fraunces",Georgia,serif;--corps:"RsSerif",Georgia,serif;--mesure:66ch}
*{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--encre);font-family:var(--corps);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums lining-nums}
h1,h2,h3{font-family:var(--titre);font-weight:600;letter-spacing:-.02em;line-height:1.1}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.lab{font-family:var(--corps);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)} .lab.r{color:var(--rouge)}
header{position:sticky;top:0;z-index:9;background:var(--creme);border-bottom:1px solid var(--filet)}
header .in{max-width:1180px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brand img{height:34px;width:auto}
.brand .mot{font-family:"Orbitron",var(--corps);font-size:22px;font-weight:400;text-transform:lowercase;color:var(--encre)}
.brand .bl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);border-left:1px solid var(--filet);padding-left:12px;margin-left:4px}
nav{display:flex;align-items:center;gap:26px} nav .fr{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)} nav .fr a,nav .fr b{color:var(--encre);text-decoration:none} nav .fr b{font-weight:600}
.cta{display:inline-block;background:var(--rouge);color:#fff;text-decoration:none;font-size:15px;padding:12px 22px;font-family:var(--corps);border:none;cursor:pointer}
.navlink{color:var(--encre);text-decoration:none;font-size:14.5px;border-bottom:1.5px solid var(--rouge);padding-bottom:3px} .navlink:hover{color:var(--rouge)}
.hero{padding:110px 0 84px} .hero .kick{margin-bottom:26px} .hero h1{font-size:66px;max-width:14ch;margin-bottom:24px} .hero .sub{font-size:22px;color:var(--gris);max-width:46ch;margin-bottom:38px}
section.blk{padding:80px 0;border-top:1px solid var(--filet)} .blk h2{font-size:40px;max-width:22ch;margin:14px 0 8px} .blk .intro{color:var(--gris);max-width:var(--mesure);margin-bottom:40px}
.gain-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px 60px}
.va__t{font-family:var(--titre);font-size:18px;font-weight:600;color:var(--encre)}
.va__num{font-family:var(--titre);font-size:36px;font-weight:600;color:var(--rouge);line-height:1.04;margin:8px 0 12px}
.va__ctx{font-size:14px;color:var(--gris);max-width:46ch;line-height:1.55}
.founder__id{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.founder__ph{width:104px;height:104px;object-fit:cover;border-radius:50%;border:1px solid var(--filet);flex:none}
.founder__n{font-family:var(--titre);font-size:26px;font-weight:600} .founder__role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);margin-top:4px}
.founder__bio{font-size:19px;max-width:66ch;margin-bottom:12px} .founder__bio strong{font-weight:600}
.founder__quoi{color:var(--gris);max-width:66ch;margin-bottom:36px}
.founder__par{padding-top:30px;border-top:1px solid var(--filet)}
.pl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin:0 0 20px}
.pcs{display:flex;flex-wrap:wrap;align-items:center;gap:28px 44px}
.lgc{height:var(--h,46px);display:flex;align-items:center} .lgc img{height:100%;width:auto;max-width:210px;object-fit:contain}
.cas{border-top:1px solid var(--filet);padding:50px 0} .cas__head{display:grid;grid-template-columns:150px 1fr;gap:40px;align-items:start}
.cas .lg{min-height:56px;display:flex;align-items:center;justify-content:center} .cas .lg img{max-height:var(--lh,48px);max-width:100%;object-fit:contain}
.tags{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap} .tag{font-family:var(--corps);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rouge);padding:4px 11px;color:var(--rouge)}
.cas__pb{font-weight:600;font-size:19px;margin-bottom:6px;max-width:70ch} .cas__sol{font-size:16px;color:var(--gris);max-width:70ch}
.cas__shots{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:18px;margin-top:28px} .shot{background:var(--panneau);border:1px solid var(--filet);padding:10px} .shot img{width:100%;height:auto;display:block;border:1px solid var(--filet)}
.team{display:grid;grid-template-columns:repeat(7,1fr);gap:18px;margin-top:6px} .pf img{width:100%;height:auto;display:block;filter:grayscale(1);aspect-ratio:34/38;object-fit:cover}
.pf figcaption{display:flex;flex-direction:column;margin-top:11px} .pf__n{font-family:var(--titre);font-size:16px;font-weight:600} .pf__r{font-size:12px;color:var(--gris)}
.end{padding:96px 0;text-align:center;border-top:1px solid var(--filet)} .end h2{font-size:44px;margin:0 auto 14px;max-width:16ch} .end__sub{color:var(--gris);margin:0 auto 30px;max-width:46ch}
footer{border-top:1px solid var(--filet);padding:56px 0 40px;color:var(--gris);font-size:14px}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:34px}
.fcol a,.fcol span{display:block;color:var(--gris);text-decoration:none;margin-top:8px} .fcol a:hover{color:var(--encre)}
.fcol .lab{margin-bottom:4px}
.flegal{font-size:12px;color:var(--gris);border-top:1px solid var(--filet);padding-top:20px;max-width:none}
.flang{margin-top:16px;font-size:13px;letter-spacing:.12em;text-transform:uppercase} .flang a,.flang b{color:var(--encre);text-decoration:none} .flang .sep{color:var(--gris);margin:0 8px}
/* L'ancien point de bascule unique a 820px est retire le 22/07 : il ne corrigeait que six
   regles et entrait en conflit avec les trois paliers ci-dessous, qui le remplacent entierement. */

/* ============ Tenue sur petits ecrans — 2026-07-22 ============
   Rien de nouveau cote couleurs ni polices : seules l'echelle et la mise en page plient.
   Regle dure : le corps de la page ne deborde jamais horizontalement, quelle que soit la largeur.
   Reporte depuis la maquette de revue validee par Charles. */

.hero h1{font-size:clamp(30px,7.9vw,66px)}
.hero .sub{font-size:clamp(17px,3.4vw,22px)}
.blk h2{font-size:clamp(24px,5vw,40px)}
.end h2{font-size:clamp(26px,5.4vw,44px);margin:0 auto 30px}
.va__num{font-size:clamp(28px,4.4vw,36px)}
h1,h2{text-wrap:balance}

/* Portraits carres : cadrage d'origine conserve, rien n'est rogne */
.pf img{aspect-ratio:1/1}

/* Logos ranges en cases egales : lisible d'un coup, propre en capture d'ecran.
   Chaque logo se cale sur sa case, pas sur une hauteur fixe. */
.pcs{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:stretch}
.lgc{height:92px;background:var(--panneau);border:1px solid var(--filet);
     display:flex;align-items:center;justify-content:center;padding:14px 16px}
.lgc img{height:auto;width:auto;max-width:82%;max-height:62%;object-fit:contain}
.lgc img[alt="Colas"],.lgc img[alt="Saint-Gobain"],.lgc img[alt="Design-Auto"]{max-width:96%;max-height:80%}
.lgc img[alt="Califrais"]{max-width:90%;max-height:74%}

/* Aucun indicateur de defilement, nulle part : c'est la vignette suivante
   qui depasse du bord qui dit qu'il y en a d'autres. */
.team,.cas__shots{scrollbar-width:none;-ms-overflow-style:none}
.team::-webkit-scrollbar,.cas__shots::-webkit-scrollbar{display:none;width:0;height:0}

/* L'equipe garde quatre colonnes tant que sept vignettes seraient trop petites. */
@media(max-width:1179px){
  .team{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:1023px){
  .pcs{grid-template-columns:repeat(4,1fr)}
  .cas__shots{grid-auto-flow:row}
  .wrap{padding:0 28px}
  header .in{padding:14px 28px}
  .hero{padding:76px 0 60px}
  section.blk{padding:64px 0}
  .gain-grid{gap:36px 44px}
  .team{grid-template-columns:repeat(4,1fr)}
  .cas__head{grid-template-columns:112px 1fr;gap:26px}
}

/* L'en-tete lache le bouton de rendez-vous des que la place manque : la marque et
   le choix de langue reprennent leur aise. Le bouton reste dans l'accroche et en bas de page. */
@media(max-width:767px){
  header .navlink{display:none}
  nav{gap:0}
}

@media(max-width:767px){
  .wrap{padding:0 20px}
  header .in{padding:12px 20px}
  .brand .bl{display:none}
  .brand img{height:28px} .brand .mot{font-size:19px}
  .hero{padding:48px 0 42px} .hero .kick{margin-bottom:18px} .hero h1{margin-bottom:18px} .hero .sub{margin-bottom:30px}
  section.blk{padding:50px 0}
  .gain-grid{grid-template-columns:1fr;gap:30px}
  .founder__id{gap:14px} .founder__ph{width:76px;height:76px} .founder__n{font-size:22px}
  .founder__bio{font-size:17px}
  .pcs{grid-template-columns:repeat(3,1fr);gap:10px}
  .lgc{height:72px;padding:10px 12px}
  .lgc img[alt="Califrais"]{max-width:80%;max-height:66%}
  .cas{padding:34px 0} .cas__head{grid-template-columns:1fr;gap:14px}
  .cas .lg{min-height:0;justify-content:flex-start}
  .end{padding:60px 0}
  .fcols{grid-template-columns:1fr}

  /* L'equipe devient un rail que l'on fait glisser, pleine largeur d'ecran. */
  .team{
    display:flex;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:20px;
    margin:6px -20px 0;padding:0 20px 6px;
    -webkit-overflow-scrolling:touch;
  }
  .team .pf{flex:0 0 46%;scroll-snap-align:start}

  .cas__shots{
    display:flex;grid-auto-flow:row;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:20px;
    margin:22px -20px 0;padding:0 20px 6px;
    -webkit-overflow-scrolling:touch;
  }
  .cas__shots .shot{flex:0 0 84%;scroll-snap-align:start}
}

@media(max-width:420px){
  .pcs{grid-template-columns:repeat(2,1fr)}
  .team .pf{flex:0 0 58%}
  .cas__shots .shot{flex:0 0 90%}
  .tags{gap:6px} .tag{font-size:10px;padding:3px 9px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .team,.cas__shots{scroll-snap-type:none}
}

a:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}