/* =============================================================
   pierrebochet.com, design system
   SOURCE UNIQUE DE VÉRITÉ. Aucune valeur de couleur, d'espacement,
   de rayon ou de durée ne doit être écrite en dur ailleurs.
   Contrastes vérifiés selon WCAG 2.1 (ratio indiqué sur blanc).
   ============================================================= */

/* ---------- 0. POLICES, HÉBERGÉES AVEC LE SITE ----------
   Fichiers variables tirés de Fontsource 5.3.0 (licence OFL, copie
   dans public/fonts/). Bricolage porte les axes graisse et taille
   optique, Josefin la graisse. Deux sous-ensembles par famille :
   latin, et latin étendu chargé seulement si un caractère l'exige. */
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Josefin Sans";
  font-style:normal;
  font-weight:100 700;
  font-display:swap;
  src:url("/fonts/josefin-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Josefin Sans";
  font-style:normal;
  font-weight:100 700;
  font-display:swap;
  src:url("/fonts/josefin-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- VARIABLES COMMUNES AUX NEUF PAGES ----------
   Valeur identique sur toutes les maquettes. Une variable dont la valeur
   change d'une page à l'autre reste déclarée dans la feuille de la page. */

/* ---------- VARIABLES COMMUNES AUX NEUF PAGES ----------
   Valeur identique sur toutes les maquettes. Une variable dont la valeur
   change d'une page à l'autre reste déclarée dans la feuille de la page. */

/* ---------- VARIABLES COMMUNES AUX NEUF PAGES ----------
   Valeur identique sur toutes les maquettes. Une variable dont la valeur
   change d'une page à l'autre reste déclarée dans la feuille de la page. */
:root{
  /* ---------- COULEURS (charte) ---------- */
  --navy:#0E2E49;
  --navy-soft:#1B4164;
  --navy-70:#3F5871;
  --violet:#715BFA;
  --violet-light:#A682FB;
  --violet-20:#EDE6FE;
  --sky:#4FC1FD;
  --sky-20:#E4F4FE;
  --gold:#F2B33D;
  --paper:#FFFFFF;
  --paper-alt:#F3F5F9;
  --line:#DDE2EC;
  --ph:#D7DCE6;
  --ph-line:#B8C0CE;
  /* Texte des emplacements à fournir : 5,37:1 sur --ph. L'ancienne valeur
     #5F7080 (#6E7A8C sur deux pages) tombait à 3,71:1. */
  --ph-text:#3F5871;
  /* Encres : seules teintes de violet et de bleu autorisées pour du texte
     sur fond clair ou teinté. --violet-ink : 5,37:1 sur blanc, 5,39:1 sur
     --paper-alt. --sky-ink : 5,93:1 sous du blanc. */
  --violet-ink:#5F44F0;
  --sky-ink:#1C6A94;

  /* ---------- TYPO ---------- */
  /* Bricolage Grotesque remplace Syne : chasse plus etroite, hauteur
     d'x plus basse, donc un bloc de titre plus vertical a corps egal.
     C'est une variable a axe optique, le navigateur ajuste le dessin
     selon la taille sans reglage supplementaire. */
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Josefin Sans","Century Gothic","Avenir Next",sans-serif;

  /* ---------- SYSTÈME D'ESPACEMENT ----------
     Une seule source de vérité. Aucun padding ni margin
     en dur ailleurs dans la feuille de style.            */
  --wrap:1320px;
  --gutter:20px;              /* marge latérale minimale, tous écrans */
  --section-y:clamp(64px,7.5vw,112px);   /* respiration verticale d'une section */
  --section-y-sm:clamp(40px,4.5vw,64px); /* bandeaux courts */
  --grid-gap:clamp(18px,2.2vw,26px);     /* entre cartes d'une même grille */
  --stack-1:8px;
  --stack-4:32px;

  /* ---------- RAYONS ---------- */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;
}

:root{
  --fs-micro:.8rem;        /* 12,8px, étiquettes en capitales seulement */
  --fs-sm:1rem;            /* 16px, plancher de lisibilité */
  --fs-base:1.0625rem;     /* 17px, texte courant */
  --fs-lead:1.15rem;       /* 18,4px, chapô */
  --lh-base:1.7;
  --fw-text:500;
  --fw-strong:600;

  /* Échelle d'espacement, multiples de 8 */
  --stack-1:8px; --stack-4:32px;

  /* Rythme interne d'un bloc de texte */
  --flow-tight:14px;   /* surtitre vers titre */
  --flow-base:22px;    /* titre vers chapô */
  --flow-cta:32px;     /* dernier texte vers bouton */
}
/* Règles identiques sur les neuf maquettes, dans l'ordre de la page d'accueil.
   Une règle propre à une page reste dans src/styles/pages/. */
*{box-sizing:border-box}
img{max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--section-y)}
.alt{background:var(--paper-alt)}
.btn-primary{background:var(--violet);color:#fff}
.btn-primary:hover{background:var(--navy)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.logo{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;
  flex:none;text-decoration:none;overflow:hidden;
  transition:transform .18s cubic-bezier(.3,1.3,.5,1),box-shadow .18s ease}
.logo img{width:100%;height:100%;display:block;object-fit:contain}
.logo:hover{transform:scale(1.06);box-shadow:0 6px 18px rgba(14,46,73,.22)}
.nav-links{display:flex;gap:var(--stack-4);justify-content:center;flex-wrap:wrap;align-items:center}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item.open .chev{transform:rotate(180deg)}
.nav-item.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.mega-ico svg{width:22px;height:22px;display:block}
footer{background:linear-gradient(180deg,#0A4269 0%,#073450 100%);color:#D7E2EC;font-size:1rem}
footer>.wrap{padding-block:clamp(44px,5vw,68px)}
.pied-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(30px,4vw,64px)}
.pied-marque{display:flex;flex-direction:column;gap:var(--stack-3);align-items:flex-start}
.pied-logo{display:flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff;
  transition:opacity .18s ease}
.pied-logo img{width:56px;height:56px;display:block;flex:none}
.pied-logo:hover{opacity:.82}
.pied-marque p{color:#C3D5E2;font-weight:var(--fw-text);line-height:1.55;max-width:46ch}
/* Les colonnes s'alignent optiquement sur le nom de la marque, centre dans
   la hauteur du sigle de 56px. */
.pied-col{padding-top:18px}
.pied-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--stack-1)}
.social svg{width:20px;height:20px;display:block}
/* La marge interieure du logo est portee par sa taille, jamais par un
   remplissage. Un padding de 9 px en box-sizing border-box rongeait la
   boite de l'interieur : mesure sur Collective, seul logo sans classe
   d'exception, boite de 22,67 px et contenu reduit a 4,67 px, soit un
   cinquieme des autres. 60 % de la pastille redonne 25,2 px de logo et
   8,4 px de marge de chaque cote, l'intention d'origine. */
.social>img{width:60%;height:60%;object-fit:contain;display:block}
/* Les deux plaques pleines font exception : elles occupent tout le disque. */
.social-plein>img,.social-li>img{width:100%;height:100%}
/* Le rognage circulaire est porte par l'image elle-meme : plus sur que de
   compter sur l'overflow du parent. */
.social-plein img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.social-li img{width:100%;height:100%;display:block;border-radius:var(--r-pill)}
/* Filet de démarcation : dégradé qui défile en continu, épaisseur fixe. */
.pied-filet{height:3px;
  background:linear-gradient(90deg,var(--violet) 0%,var(--sky) 22%,var(--violet-light) 44%,
    var(--violet) 62%,var(--sky) 82%,var(--violet) 100%);
  background-size:220% 100%;animation:filet 11s linear infinite}
@keyframes filet{from{background-position:0% 0}to{background-position:220% 0}}
.pied-cta:hover svg{transform:translateX(4px)}
.pied-bas{background:#06283E}
.pied-bas>.wrap{display:flex;justify-content:space-between;align-items:center;
  gap:var(--stack-3);flex-wrap:wrap;padding-block:clamp(16px,1.8vw,22px);
  font-size:0.95rem;color:#B6C8D6}
.pied-bas strong{color:#fff;font-weight:600}
.pied-legal{display:flex;align-items:center;gap:12px}
.pied-legal i{font-style:normal;color:#5E7F96}
.mega-link::after{content:none}
@property --halo-ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.halo-wrap{position:relative;display:inline-flex;border-radius:var(--r-pill)}
.halo-wrap>.btn{position:relative;z-index:1}
@keyframes haloTour{from{--halo-ang:0deg}to{--halo-ang:360deg}}
@keyframes haloFondu{0%{opacity:0}7%{opacity:1}86%{opacity:1}100%{opacity:0}}
.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)}
.scrim.open{opacity:1;visibility:visible;pointer-events:auto}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer-close svg{width:18px;height:18px}
.drawer-nav{display:flex;flex-direction:column;padding:8px 22px 0}
.drawer-group{border-bottom:1px solid rgba(255,255,255,.12)}
.drawer-group-btn[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:1}
.drawer-group.open .drawer-sub{grid-template-rows:1fr}
.drawer-sub-in{overflow:hidden}
.sigle-centre{transform:translateY(var(--sigle-dy,0px))}