/* ==========================================================================
   Periodis — feuille de style unique
   Charte : identite/CHARTE.md
   Registre sombre technique. Aucune dependance, aucune requete externe.
   ========================================================================== */

/* ------------------------------------------------------------- polices */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ------------------------------------------------------------ variables */
:root{
  /* fonds, du plus profond au plus clair */
  --nuit:#04152E;
  --fond:#071D3D;
  --carte:#0C2A55;
  --carte-haute:#123468;
  --filet:#1B4079;

  --marine:#0A2E66;
  --acier:#3895D3;
  --acier-clair:#6FB8E8;
  --vert:#2ECC71;          /* accent GRAPHIQUE seulement : filets, embleme.
                              Jamais sur une coche, un badge ou un bouton :
                              le produit ne prononce aucun verdict. */
  --vert-clair:#5EE098;

  --texte:#EAF1F9;
  --texte-doux:#A9C2DE;
  --texte-faible:#7E9BBD;

  --large:1140px;
  --etroit:780px;
  --rayon:10px;
  --transition:150ms ease;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins','Century Gothic','Trebuchet MS',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.68;
  color:var(--texte);
  background:var(--nuit);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}

h1,h2,h3{color:#fff;margin:0 0 .55em;}
h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:700;line-height:.98;letter-spacing:-.042em;}
h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.04;letter-spacing:-.03em;
  margin-top:0;}
h3{font-size:1.14rem;font-weight:600;line-height:1.25;letter-spacing:-.012em;}
p{margin:0 0 1.1em;color:var(--texte-doux);}
ul{margin:0 0 1.2em;padding-left:1.25em;}
li{margin-bottom:.5em;color:var(--texte-doux);}
li::marker{color:var(--acier);}
strong{color:#fff;font-weight:600;}

a{color:var(--acier-clair);text-decoration:none;transition:color var(--transition);}
a:hover{color:#fff;}
a:focus-visible,button:focus-visible{outline:3px solid var(--acier);outline-offset:3px;border-radius:3px;}

.conteneur{max-width:var(--large);margin:0 auto;padding:0 26px;}
.etroit{max-width:var(--etroit);margin-left:auto;margin-right:auto;}

/* ---------------------------------------------------------- composants */
.pilule{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;border-radius:999px;
  background:rgba(56,149,211,.12);border:1px solid rgba(56,149,211,.34);
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--acier-clair);margin:0 0 1.25em;
}
.pilule::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--vert);flex:none;
}

.filet-accent{
  display:block;width:58px;height:3px;border-radius:2px;margin:0 0 1.5em;
  background:linear-gradient(90deg,var(--acier) 0%,var(--vert) 100%);
}
.centre .filet-accent{margin-left:auto;margin-right:auto;}
.centre{text-align:center;}
.centre p{margin-left:auto;margin-right:auto;}

.intro{font-size:1.09rem;color:var(--texte-doux);max-width:64ch;}

/* -------------------------------------------------------------- entete */
/* En haut de page, le grand logo du hero suffit : l'en-tete reste
   transparente et sans marque. Des qu'on scrolle, elle se pose et le logo
   apparait. Sans cela, deux logos se regardent a l'ecran. */
.entete{
  position:sticky;top:0;z-index:20;
  background:transparent;border-bottom:1px solid transparent;
  transition:background 220ms ease,border-color 220ms ease,backdrop-filter 220ms ease;
}
.entete-posee{
  background:rgba(4,21,46,.92);backdrop-filter:blur(12px);
  border-bottom-color:var(--filet);
}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:74px;flex-wrap:wrap;}
.entete a.marque{
  display:flex;align-items:center;padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* visibility revient sans delai a l'apparition, avec delai a la
     disparition : un element encore `hidden` ignore le focus en silence. */
  transition:opacity 220ms ease,transform 220ms ease,visibility 0s;
}
.entete-posee a.marque{opacity:1;visibility:visible;transform:none;}
.entete:not(.entete-posee) a.marque{transition-delay:0s,0s,220ms;}
.entete a.marque img{height:46px;width:auto;}
/* Repli sans JavaScript : l'en-tete reste posee, rien ne disparait. */
.sans-js .entete{background:rgba(4,21,46,.92);border-bottom-color:var(--filet);}
.sans-js .entete a.marque{opacity:1;visibility:visible;transform:none;}

/* --------------------------------------------------- bandeau des metiers */
.bandeau-metiers{
  overflow:hidden;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  background:rgba(7,29,61,.6);padding:14px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
@keyframes defile{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.bandeau-piste{
  display:flex;width:max-content;animation:defile 42s linear infinite;
}
.bandeau-piste span{
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--texte-faible);white-space:nowrap;
}
.bandeau-piste b{color:var(--acier-clair);font-weight:600;}
.bandeau-piste i{color:var(--vert);font-style:normal;}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.nav a{
  color:var(--texte-doux);font-size:.94rem;padding:11px 13px;min-height:44px;
  display:flex;align-items:center;border-radius:7px;
  transition:background var(--transition),color var(--transition);
}
.nav a:hover{background:rgba(56,149,211,.13);color:#fff;}
.nav a[aria-current="page"]{color:#fff;background:rgba(56,149,211,.16);}

/* ---------------------------------------------------------------- hero
   Composition centree : l'embleme rayonne, le titre suit, l'ecran emerge
   par-dessous. Un bandeau plat n'a aucune profondeur ; ici la lumiere vient
   d'un point et tout s'organise autour. */
.hero{
  position:relative;overflow:hidden;text-align:center;padding:76px 0 0;
  background:
    radial-gradient(900px 620px at 50% 6%, rgba(56,149,211,.26), transparent 64%),
    radial-gradient(620px 420px at 50% 2%, rgba(46,204,113,.10), transparent 62%),
    linear-gradient(175deg,#07203F 0%,#04152E 62%,#03101F 100%);
}
/* ---------------------------------------------------------- flux de rayons
   L'effet d'aspiration : les rayons naissent au point de fuite, s'ouvrent
   vers l'exterieur et s'estompent. Deux couches decalees d'une demi-periode
   pour que le flux soit continu — avec une seule couche, le retour au debut
   se voit comme un a-coup.
   9 s par cycle : assez lent pour ne pas happer l'oeil pendant la lecture,
   assez rapide pour se voir en deux secondes. Un aller-retour de 28 s, teste
   avant, etait imperceptible. */
@keyframes aspiration{
  0%  {transform:scale(.55);opacity:0;}
  18% {opacity:.85;}
  70% {opacity:.5;}
  100%{transform:scale(2.3);opacity:0;}
}
.hero-flux{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.hero-flux span{
  position:absolute;left:50%;top:14%;width:190vmax;height:190vmax;
  margin:-95vmax 0 0 -95vmax;transform-origin:50% 50%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(122,190,236,.20) 0deg .55deg, transparent .55deg 4.4deg);
  mask-image:radial-gradient(circle at 50% 50%, transparent 2%, #000 16%, transparent 46%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 2%, #000 16%, transparent 46%);
  animation:aspiration 9s linear infinite;
  will-change:transform,opacity;
}
.hero-flux span:nth-child(2){animation-delay:-4.5s;}

/* Trame technique : evoque le plan, pas la data. */
@keyframes derive-trame{
  from{transform:scale(1.06);}
  to  {transform:scale(1);}
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 300px at 50% 12%,rgba(122,190,236,.16),transparent 68%);
}
/* Trame technique : evoque le plan, pas la data. Elle derive en sens
   inverse, ce qui creuse la profondeur entre les deux couches. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(56,149,211,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,149,211,.05) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(860px 520px at 50% 40%,#000 22%,transparent 76%);
  -webkit-mask-image:radial-gradient(860px 520px at 50% 40%,#000 22%,transparent 76%);
  transform-origin:50% 14%;
  animation:derive-trame 28s ease-in-out infinite alternate;
}
/* L'embleme respire au meme rythme, d'un souffle a peine perceptible. */
@keyframes souffle-logo{
  from{filter:drop-shadow(0 0 34px rgba(56,149,211,.42)) drop-shadow(0 0 80px rgba(46,204,113,.12));}
  to  {filter:drop-shadow(0 0 52px rgba(56,149,211,.62)) drop-shadow(0 0 120px rgba(46,204,113,.26));}
}
.hero .conteneur{position:relative;z-index:1;}

/* Le logo complet plutot que le picto seul : le nom et la baseline disent
   qui parle avant meme la premiere phrase. */
.hero-embleme{
  width:min(380px,72vw);height:auto;margin:0 auto 30px;
  filter:drop-shadow(0 0 42px rgba(56,149,211,.5)) drop-shadow(0 0 100px rgba(46,204,113,.18));
  animation:souffle-logo 14s ease-in-out infinite alternate;
}
.hero .pilule{margin-left:auto;margin-right:auto;}
.hero h1{margin:0 auto .5em;max-width:17ch;}
.hero .chapo{font-size:1.14rem;color:var(--texte-doux);max-width:62ch;
  margin:0 auto 1.7em;}
.hero .preuves{
  display:flex;justify-content:center;gap:10px 32px;flex-wrap:wrap;list-style:none;
  padding:0;margin:0 auto 2.1em;font-size:.97rem;color:var(--texte-doux);
}
.hero .preuves li{margin:0;padding-left:21px;position:relative;color:var(--texte-doux);}
.hero .preuves li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border-radius:50%;background:var(--acier);box-shadow:0 0 0 4px rgba(56,149,211,.16);
}
.hero .boutons{justify-content:center;}

/* L'ecran emerge du hero et mord sur la section suivante. */
.hero-scene{margin-top:58px;padding-bottom:0;}
.hero-scene .ecran{
  max-width:880px;margin:0 auto -80px;text-align:left;
  transform:perspective(1600px) rotateX(3.2deg);transform-origin:top center;
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 0 1px rgba(56,149,211,.22);
}
.section-apres-scene{padding-top:126px;}

/* -------------------------------------------------------------- boutons */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 27px;border-radius:8px;
  font-weight:600;font-size:1rem;border:1px solid transparent;
  transition:background var(--transition),border-color var(--transition),
             color var(--transition),transform var(--transition);
}
.bouton-primaire{background:var(--acier);color:#052240;border-color:var(--acier);
  box-shadow:0 6px 18px -6px rgba(56,149,211,.6);}
.bouton-primaire:hover{background:var(--acier-clair);border-color:var(--acier-clair);
  color:#052240;transform:translateY(-2px);
  box-shadow:0 12px 26px -8px rgba(56,149,211,.75),0 0 26px -8px rgba(56,149,211,.6);}
.bouton-fantome{background:transparent;color:var(--texte);border-color:var(--filet);}
.bouton-fantome:hover{background:rgba(56,149,211,.12);border-color:var(--acier);color:#fff;
  box-shadow:0 0 24px -8px rgba(56,149,211,.55);}
/* Meme traitement sur les etapes numerotees et l'ecran illustre. */
.etape{transition:border-color 180ms ease,box-shadow 180ms ease;}
.etape:hover{border-color:var(--acier);
  box-shadow:0 10px 26px rgba(0,0,0,.34),0 0 26px -10px rgba(56,149,211,.4);}
.boutons{display:flex;gap:13px;flex-wrap:wrap;}

/* ------------------------------------------------------------- sections */
.section{padding:78px 0;}
.section-fond{background:var(--fond);}
.section + .section-fond,.section-fond + .section{border-top:1px solid var(--filet);}

/* cartes generiques */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;}
.carte{
  position:relative;overflow:hidden;
  background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:26px 24px;
  box-shadow:0 1px 2px rgba(0,0,0,.28);
  transition:border-color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
}
/* Halo au survol : une lueur froide sous la carte, plus une bordure qui
   s'allume. C'est ce qui donne la profondeur ; sans lui, une carte n'est
   qu'un rectangle. */
.carte:hover{
  border-color:var(--acier);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 0 1px rgba(56,149,211,.35),
             0 0 32px -6px rgba(56,149,211,.42);
}
/* Lueur interieure qui apparait en haut de la carte survolee. */
.carte::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px 150px at 50% -30%,rgba(56,149,211,.22),transparent 70%);
  transition:opacity 180ms ease;
}
.carte:hover::after{opacity:1;}
.carte h3{margin:0 0 .5em;}
.carte p{font-size:.96rem;margin-bottom:0;color:var(--texte-doux);}
.carte p + p{margin-top:.8em;}
/* chiffre en filigrane */
.carte .filigrane{
  position:absolute;top:-14px;right:6px;font-size:5.4rem;font-weight:700;
  color:rgba(56,149,211,.10);line-height:1;pointer-events:none;user-select:none;
}
.carte .ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:11px;margin-bottom:15px;
  background:rgba(56,149,211,.15);border:1px solid rgba(56,149,211,.3);
}
.carte .ico svg{width:22px;height:22px;stroke:var(--acier-clair);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* etiquettes d'etat produit */
.etat{
  display:inline-flex;align-items:center;gap:7px;
  /* Sans align-self, un conteneur flex en colonne etire l'etiquette sur
     toute la largeur de la carte : elle cesse d'etre une pastille. */
  align-self:flex-start;
  font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border-radius:5px;margin-bottom:13px;
}
.etat-service{background:rgba(46,204,113,.14);color:var(--vert-clair);
  border:1px solid rgba(46,204,113,.34);}
.etat-devis{background:rgba(169,194,222,.10);color:var(--texte-faible);
  border:1px solid var(--filet);}

/* carte produit de la gamme */
.produit{display:flex;flex-direction:column;height:100%;}
.produit .sigle{font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 .1em;letter-spacing:-.01em;}
.produit .support{font-size:.9rem;color:var(--acier-clair);margin:0 0 .9em;}
.produit .lien-produit{margin-top:auto;padding-top:14px;display:inline-flex;
  align-items:center;min-height:44px;font-weight:600;}

/* encadre fort */
.cadre{
  background:linear-gradient(160deg,var(--carte-haute) 0%,var(--carte) 100%);
  border:1px solid var(--filet);border-left:4px solid var(--acier);
  border-radius:var(--rayon);padding:30px 32px;
}
.cadre h2,.cadre h3{margin-top:0;}
.cadre p:last-child{margin-bottom:0;}

/* questions / reponses */
.qr{border-top:1px solid var(--filet);padding:24px 0;}
.qr:last-of-type{border-bottom:1px solid var(--filet);}
.qr h3{margin:0 0 .45em;color:#fff;}
.qr p:last-child{margin-bottom:0;}

/* etapes numerotees */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px;}
.etape{position:relative;overflow:hidden;background:var(--carte);
  border:1px solid var(--filet);border-radius:var(--rayon);padding:24px;}
.etape .num{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;background:var(--acier);color:#052240;font-weight:700;
  font-size:.95rem;margin-bottom:13px;
}
.etape p{margin:0;font-size:.96rem;}

/* illustration d'ecran (maquette, pas capture) */
.ecran{
  background:var(--carte);border:1px solid var(--filet);border-radius:12px;
  overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.4);
}
.ecran-barre{
  display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:var(--carte-haute);border-bottom:1px solid var(--filet);
}
.ecran-barre span{width:10px;height:10px;border-radius:50%;background:var(--filet);}
.ecran-barre em{margin-left:9px;font-style:normal;font-size:.79rem;color:var(--texte-faible);
  letter-spacing:.04em;}
.ecran-corps{padding:17px 19px 20px;}
.ecran-titre{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texte-faible);margin:0 0 12px;font-weight:600;}
.ligne{
  display:grid;grid-template-columns:82px 1fr auto;gap:13px;align-items:center;
  padding:10px 0;border-top:1px solid rgba(27,64,121,.6);font-size:.85rem;
}
.ligne:first-of-type{border-top:0;}
.ligne .date{color:var(--acier-clair);font-variant-numeric:tabular-nums;}
.ligne .libelle{color:var(--texte-doux);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.ligne .anc{color:var(--texte-faible);font-size:.77rem;white-space:nowrap;}
.ecran-pied{font-size:.76rem;color:var(--texte-faible);margin:13px 0 0;padding-top:12px;
  border-top:1px solid rgba(27,64,121,.6);}

/* ============================================================== FRISE
   Le moment memorable : une reserve de 2013 qu'on voit traverser les
   visites. C'est le produit rendu visible, et rien d'autre sur le site
   ne dit aussi vite ce qu'il fait. */
.frise{position:relative;margin:2.6rem 0 0;}
.frise-piste{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;
  padding-top:44px;
}
/* la ligne de vie de la reserve, du premier au dernier jalon */
.frise-piste::before{
  content:"";position:absolute;left:12.5%;right:12.5%;top:52px;height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--acier) 0%,var(--acier) 62%,var(--vert) 100%);
  box-shadow:0 0 18px rgba(56,149,211,.45);
}
.jalon{position:relative;text-align:center;padding:0 10px;}
.jalon::before{
  content:"";position:absolute;left:50%;top:-8px;width:15px;height:15px;
  transform:translateX(-50%);border-radius:50%;
  background:var(--nuit);border:3px solid var(--acier);
  box-shadow:0 0 0 5px rgba(56,149,211,.14);
}
.jalon:last-child::before{border-color:var(--vert);box-shadow:0 0 0 5px rgba(46,204,113,.16);}
.jalon .an{
  display:block;font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-.02em;
  margin:26px 0 2px;
}
.jalon .quoi{font-size:.84rem;color:var(--texte-faible);margin:0;line-height:1.45;}
.frise-legende{
  margin:34px auto 0;max-width:58ch;text-align:center;font-size:1.02rem;
  color:var(--texte-doux);
}
.frise-legende strong{color:var(--vert-clair);}

/* ============================================================== BENTO
   Des blocs de tailles differentes plutot qu'une grille de rectangles
   identiques : c'est ce qui casse l'impression de « trucs carres ». */
.bento{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:2.4rem;
}
.bento > *{grid-column:span 3;}
.bento > .bento-large{grid-column:span 4;}
.bento > .bento-petit{grid-column:span 2;}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .bento > *,.bento > .bento-large,.bento > .bento-petit{grid-column:span 2;}
}

/* grille magazine pour la gamme : le produit en service occupe deux fois
   plus de place que les autres, la hierarchie se voit sans un mot */
.gamme-grille{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:2.4rem;}
.gamme-grille > *{grid-column:span 2;}
.gamme-grille > .produit-vedette{grid-column:span 6;}
@media (min-width:901px){
  .gamme-grille > .produit-vedette{
    grid-column:span 3;grid-row:span 2;
    background:linear-gradient(155deg,var(--carte-haute) 0%,var(--carte) 70%);
  }
  .gamme-grille > .produit-vedette .sigle{font-size:2.4rem;}
}
@media (max-width:900px){
  .gamme-grille{grid-template-columns:repeat(2,1fr);}
  .gamme-grille > *,.gamme-grille > .produit-vedette{grid-column:span 2;}
}

.note{font-size:.92rem;color:var(--texte-faible);}
.sans-marge-haut{margin-top:0;}
.sans-marge-bas{margin-bottom:0;}
.sans-marge{margin:0;}
.cale-gauche{margin-left:0;}
.logo-pied{height:44px;width:auto;}

/* Utilitaires d'espacement. Ils existent parce que la CSP interdit
   'unsafe-inline' : un style= en ligne serait ignore en production. */
.cale-haut{margin-top:2.2rem;}
.sous-entete{padding-top:56px;}

/* Marqueur voyant : champ legal restant a completer avant mise en ligne. */
[data-a-completer]{
  background:#FFE9A8;color:#6B4B00;font-weight:600;
  padding:1px 6px;border-radius:3px;border:1px dashed #B98900;
}

/* --------------------------------------------------------------- appel */
.appel{
  padding:74px 0;text-align:center;
  background:
    radial-gradient(760px 340px at 50% 0%, rgba(56,149,211,.16), transparent 65%),
    var(--fond);
  border-top:1px solid var(--filet);
}
.appel .boutons{justify-content:center;}

/* ---------------------------------------------------------------- pied */
.pied{background:var(--nuit);border-top:1px solid var(--filet);
  padding:52px 0 26px;font-size:.93rem;}
.pied .cols{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:34px;}
.pied h3{color:#fff;font-size:.79rem;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 1em;font-weight:600;}
.pied ul{list-style:none;padding:0;margin:0;}
.pied li{margin:0;}
.pied li a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0;
  color:var(--texte-doux);}
.pied li a:hover{color:#fff;}
.pied p{color:var(--texte-faible);}
.pied .bas{border-top:1px solid var(--filet);margin-top:26px;padding-top:20px;
  font-size:.85rem;color:var(--texte-faible);}

/* ---------------------------------------------------------- responsive */
@media (max-width:980px){
  .hero-duo{grid-template-columns:1fr;gap:38px;}
  .pied .cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .hero{padding:58px 0 52px;}
  .section{padding:54px 0;}
  .entete .conteneur{min-height:auto;padding-top:11px;padding-bottom:11px;}
  .nav a{padding:11px 9px;font-size:.89rem;}
  .cadre{padding:24px 21px;}
  .bouton{width:100%;}
  .boutons{flex-direction:column;}
  .pied .cols{grid-template-columns:1fr;gap:22px;}
  .ligne{grid-template-columns:74px 1fr;}
  .ligne .anc{display:none;}
}

/* ------------------------------------------------- mouvement reduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .carte:hover,.bouton-primaire:hover{transform:none;}
  /* Le flux se fige sur une image lisible. Sans ces lignes, les rayons
     resteraient a l'opacite 0 de la premiere image-cle : hero vide. */
  .hero-flux span{animation:none;transform:scale(1.35);opacity:.8;}
  .hero-flux span:nth-child(2){display:none;}
  .hero::after{transform:none;}
  .hero-embleme{filter:drop-shadow(0 0 42px rgba(56,149,211,.5))
                       drop-shadow(0 0 100px rgba(46,204,113,.18));}
}

/* ------------------------------------------------------------ impression */
@media print{
  .entete,.appel,.pied,.boutons{display:none;}
  body{background:#fff;color:#000;font-size:11pt;}
  .hero{background:none;padding:0 0 18px;}
  h1,h2,h3,strong{color:#000;}
  p,li{color:#222;}
  .carte,.cadre,.etape{background:none;border:1px solid #ccc;}
}