/* ==========================================================================
   victorienroudil.fr, feuille de style unique
   --------------------------------------------------------------------------
   Motif directeur : la page est un schema d'automatisation. Un fil vertical
   traverse toute la hauteur, chaque section y est branchee par un coude, et
   le fil se remplit au rythme du defilement.

   Ce fichier est separe de la page pour une raison de securite : il permet a
   la politique de contenu du serveur d'interdire tout style ecrit dans la
   page, ce qui ferme la porte a une injection de code.
   ========================================================================== */

@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo.woff2') format('woff2');
  font-weight:400 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   1. Jetons de reference
   -------------------------------------------------------------------------- */
:root{
  --noir:#060709;
  --noir-2:#0a0c11;
  --noir-3:#111520;
  --bleu:#00B0E9;
  --bleu-clair:#7fdcff;
  --bleu-sourd:#0d4256;
  --craie:#e9edf3;
  --gris:#8b95a3;
  --ligne:rgba(233,237,243,.09);
  --ligne-vive:rgba(0,176,233,.30);

  --x-fil:clamp(18px,4.2vw,58px);
  --marge:clamp(20px,5vw,72px);
  --gouttiere:clamp(28px,5vw,88px);
  --pad-noeud:clamp(80px,12vh,164px);
  --coude:30px;
  --h-portrait:200px;

  --police:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--noir);
  color:var(--craie);
  font-family:var(--police);
  font-size:clamp(1rem,.96rem + .22vw,1.14rem);
  line-height:1.62;
  font-weight:400;
  font-stretch:100%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}

/* Trame de points du canevas : donne une matiere, ne doit jamais se remarquer. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(233,237,243,.16) 1px,transparent 0);
  background-size:30px 30px;
  opacity:.42;
  -webkit-mask-image:radial-gradient(ellipse 120% 78% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 120% 78% at 50% 0%,#000 0%,transparent 72%);
}
/* Halo bleu pose une fois derriere le haut de page, jamais anime. */
body::after{
  content:'';
  position:fixed;
  top:-30vh;left:50%;
  width:min(1500px,150vw);height:110vh;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(0,176,233,.13),rgba(0,176,233,.04) 42%,transparent 68%);
}
.page{position:relative;z-index:1}

.contenu{
  margin-left:calc(var(--x-fil) + var(--gouttiere));
  margin-right:var(--marge);
  max-width:1160px;
}

/* --------------------------------------------------------------------------
   2. Le fil d'execution
   -------------------------------------------------------------------------- */
.flux{position:relative}
.fil{
  position:absolute;
  left:var(--x-fil);
  top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent 0,var(--bleu-sourd) 42px,var(--bleu-sourd) calc(100% - 90px),transparent 100%);
  z-index:0;
}
.fil__actif{
  position:absolute;
  inset:0;
  background:var(--bleu);
  box-shadow:0 0 14px rgba(0,176,233,.55);
  transform-origin:top center;
  transform:scaleY(var(--avancement,0));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42px,#000 calc(100% - 90px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 42px,#000 calc(100% - 90px),transparent 100%);
}

/* Le coude : le fil descend, tourne a droite, se branche sur le titre de section.
   C'est le trace d'un connecteur, pas le point d'une frise chronologique. */
.prise{
  position:absolute;
  left:var(--x-fil);
  width:calc(var(--gouttiere) - 16px);
  height:var(--coude);
  border-left:1px solid var(--bleu-sourd);
  border-bottom:1px solid var(--bleu-sourd);
  border-bottom-left-radius:calc(var(--coude) / 2);
  z-index:1;
  pointer-events:none;
}
.prise::after{
  content:'';
  position:absolute;
  right:-5px;bottom:-5px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--noir);
  border:1px solid var(--bleu-sourd);
  transition:background .5s ease,border-color .5s ease,box-shadow .5s ease;
}
.noeud.est-actif .prise::after{
  background:var(--bleu);
  border-color:var(--bleu);
  box-shadow:0 0 0 4px rgba(0,176,233,.14),0 0 16px rgba(0,176,233,.6);
}
.noeud.est-actif .prise{border-color:var(--ligne-vive)}

.noeud{position:relative;padding-block:var(--pad-noeud)}
.noeud > .prise{top:calc(var(--pad-noeud) - var(--coude) + 9px)}
.noeud + .noeud{padding-top:0}
.noeud + .noeud > .prise{top:calc(9px - var(--coude))}

.noeud__corps{
  display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);
  align-items:start;
}

/* --------------------------------------------------------------------------
   3. Typographie commune
   -------------------------------------------------------------------------- */
.etiquette{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bleu);
  margin:0;
}
h2{
  font-size:clamp(1.85rem,1.1rem + 2.9vw,3.35rem);
  font-weight:800;
  font-stretch:108%;
  line-height:1.03;
  letter-spacing:-.022em;
  max-width:19ch;
}
.chapeau{
  color:var(--gris);
  margin-top:1.35rem;
  max-width:60ch;
}
.chapeau strong{color:var(--craie);font-weight:600}

/* --------------------------------------------------------------------------
   4. En-tete
   -------------------------------------------------------------------------- */
.entete{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem var(--marge) 0 calc(var(--x-fil) + var(--gouttiere));
}
.sceau{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.sceau__pastille{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--ligne-vive);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.04em;color:var(--bleu);
  flex:none;
}
.sceau__mot{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.entete__liens{display:flex;align-items:center;gap:1.6rem}
.entete__lien{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);text-decoration:none;transition:color .3s ease;white-space:nowrap;
}
.entete__lien:hover,.entete__lien:focus-visible{color:var(--bleu)}

/* --------------------------------------------------------------------------
   5. Ouverture
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  --pad-hero:clamp(44px,8vh,104px);
  --y-prise:var(--pad-hero);
  padding-top:var(--pad-hero);
  padding-bottom:clamp(56px,9vh,128px);
}
/* Le coude vient se brancher sur l'etiquette, ou que se trouve le portrait. */
.hero > .prise{top:calc(var(--y-prise) + 9px - var(--coude))}

.hero__tete{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(26px,4vw,68px);
}
.hero__intro{grid-column:1;grid-row:1;min-width:0}
.hero__tete > .portrait{grid-column:2;grid-row:1;align-self:end}

.portrait{position:relative;width:var(--h-portrait);height:var(--h-portrait);flex:none}
.portrait img{width:100%;height:100%;border-radius:50%}
/* L'anneau bleu du logo, prolonge en halo net qui tourne lentement.
   C'est le degrade qui tourne, pas l'element. Faire tourner l'element
   agrandirait sa boite de calcul de 45 px en diagonale, ce qui provoquait
   trois pixels de debordement horizontal en tablette paysage. */
@property --angle-anneau{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.portrait::before{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  --angle-anneau:0deg;
  background:conic-gradient(from var(--angle-anneau,0deg),transparent 0deg,rgba(0,176,233,0) 190deg,var(--bleu) 300deg,var(--bleu-clair) 340deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:tourne 9s linear infinite;
  will-change:--angle-anneau;
}
.portrait::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(0,176,233,.18);
}
@keyframes tourne{to{--angle-anneau:360deg}}

.hero__nom{
  font-weight:800;
  text-transform:uppercase;
  line-height:.82;
  letter-spacing:-.028em;
  font-size:min(16.6vw,14.7rem);
  margin-top:clamp(14px,2vh,26px);
}
.hero__nom span{display:block;width:max-content;white-space:nowrap}
/* Les deux lignes sont calees a la meme largeur : neuf lettres resserrees
   au-dessus de six lettres elargies. C'est l'axe de chasse qui fait le travail,
   le script ne corrige que le residu. */
.hero__ligne-1{font-stretch:87%}
.hero__ligne-2{font-stretch:124.7%;color:var(--bleu)}

.hero__socle{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);
  margin-top:clamp(28px,4vh,52px);
  padding-top:clamp(24px,3.5vh,40px);
  border-top:1px solid var(--ligne);
  max-width:1000px;
}
.hero__role{font-size:clamp(1.12rem,1rem + .5vw,1.42rem);font-weight:600;font-stretch:104%;line-height:1.32;max-width:24ch}
.hero__texte{color:var(--gris);max-width:48ch}

.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(26px,3.5vh,44px)}
.bouton{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.92rem 1.45rem;border-radius:8px;
  font-size:.95rem;font-weight:600;font-stretch:102%;
  text-decoration:none;border:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.bouton:hover,.bouton:focus-visible{transform:translateY(-2px)}
.bouton--plein{background:var(--bleu);color:#02141c}
.bouton--plein:hover,.bouton--plein:focus-visible{background:var(--bleu-clair)}
.bouton--vide{border-color:var(--ligne);color:var(--craie)}
.bouton--vide:hover,.bouton--vide:focus-visible{border-color:var(--ligne-vive);background:rgba(0,176,233,.06)}
.bouton svg{width:15px;height:15px;flex:none}

.coordonnees-hero{
  display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;
  margin-top:clamp(30px,4vh,58px);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
}
.coordonnees-hero span{display:inline-flex;align-items:center;gap:.6rem}
.coordonnees-hero span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--bleu-sourd);flex:none}

/* --------------------------------------------------------------------------
   6. Cartes de savoir-faire
   -------------------------------------------------------------------------- */
.cartes{display:grid;gap:14px;margin-top:clamp(34px,5vh,64px)}
.carte{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--ligne);
  border-radius:10px;
  background:linear-gradient(168deg,var(--noir-3),var(--noir-2) 62%);
  transition:border-color .4s ease,transform .4s ease;
}
.carte:hover{border-color:var(--ligne-vive);transform:translateY(-4px)}
/* Chaque carte porte une prise, comme un noeud pose sur le canevas. */
.carte::before{
  content:'';position:absolute;top:-4px;left:clamp(24px,2.6vw,34px);
  width:7px;height:7px;border-radius:50%;
  background:var(--noir);border:1px solid var(--bleu-sourd);
  transition:background .4s ease,border-color .4s ease;
}
.carte:hover::before{background:var(--bleu);border-color:var(--bleu)}
.carte p.carte__nom{
  margin:0;
  font-family:var(--mono);font-size:.68rem;font-weight:500;line-height:1.4;letter-spacing:.19em;text-transform:uppercase;
  color:var(--bleu);
}
.carte h3{margin-top:1.05rem;font-size:1.28rem;font-weight:700;font-stretch:106%;line-height:1.22;letter-spacing:-.012em}
.carte p{margin-top:.8rem;color:var(--gris);font-size:.99rem;line-height:1.6}

/* Deux colonnes fixes : en flex, les deux chiffres passaient a la ligne des
   que la carte descendait sous 300 px de large, ce qui arrive des trois
   colonnes sur un ecran de portable. */
.chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.2rem;margin-top:1.5rem}
.chiffres div{min-width:0}
.chiffres b{
  display:block;font-size:1.32rem;font-weight:800;font-stretch:112%;letter-spacing:-.02em;
  color:var(--craie);line-height:1.1;
}
.chiffres span{
  display:block;margin-top:.25rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
}

.jetons{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:1.6rem}
.jetons .exact{text-transform:none;letter-spacing:.06em}
.jetons li{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
  color:var(--gris);padding:.34rem .6rem;border:1px solid var(--ligne);border-radius:5px;
}

.carte__lien{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.35rem;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bleu);text-decoration:none;
  transition:gap .3s ease,color .3s ease;
}
.carte__lien svg{width:13px;height:13px;flex:none}
.carte__lien:hover,.carte__lien:focus-visible{gap:.85rem;color:var(--bleu-clair)}

/* --------------------------------------------------------------------------
   7. Principes
   -------------------------------------------------------------------------- */
.principes{display:grid;gap:0;margin-top:clamp(34px,5vh,60px);max-width:70ch}
.principes li{
  position:relative;
  padding:clamp(20px,2.4vw,28px) 0 clamp(20px,2.4vw,28px) 34px;
  border-top:1px solid var(--ligne);
  color:var(--gris);
}
.principes li:last-child{border-bottom:1px solid var(--ligne)}
.principes li::before{
  content:'';position:absolute;left:0;top:calc(clamp(20px,2.4vw,28px) + .58em);
  width:7px;height:7px;border-radius:50%;background:var(--bleu-sourd);
}
.principes b{display:block;color:var(--craie);font-weight:700;font-stretch:104%;font-size:1.08rem;margin-bottom:.32rem}

/* --------------------------------------------------------------------------
   8. Questions frequentes
   -------------------------------------------------------------------------- */
.questions{display:grid;gap:0;margin-top:clamp(34px,5vh,60px);max-width:74ch}
.questions > div{padding:clamp(22px,2.5vw,30px) 0;border-top:1px solid var(--ligne)}
.questions > div:last-child{border-bottom:1px solid var(--ligne)}
.questions h3{font-size:1.1rem;font-weight:700;font-stretch:104%;line-height:1.35}
.questions p{margin-top:.6rem;color:var(--gris);font-size:.99rem}

/* --------------------------------------------------------------------------
   9. Contact
   -------------------------------------------------------------------------- */
.fiches{margin-top:clamp(34px,5vh,60px);max-width:74ch}
.fiche{
  display:grid;
  grid-template-columns:minmax(0,120px) minmax(0,1fr) auto;
  align-items:center;gap:1rem;
  padding:clamp(20px,2.4vw,26px) 0;
  border-top:1px solid var(--ligne);
  text-decoration:none;
  transition:padding-left .4s cubic-bezier(.22,.61,.36,1);
}
.fiche:last-of-type{border-bottom:1px solid var(--ligne)}
.fiche:hover,.fiche:focus-visible{padding-left:12px}
.fiche__cle{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gris)}
.fiche__valeur{
  font-size:clamp(1.02rem,.95rem + .5vw,1.42rem);font-weight:600;font-stretch:104%;
  letter-spacing:-.012em;transition:color .3s ease;overflow-wrap:anywhere;
}
.fiche__valeur small{
  display:block;font-size:.86rem;font-weight:400;font-stretch:100%;color:var(--gris);
  margin-top:.2rem;letter-spacing:0;overflow-wrap:normal;
}
.fiche__fleche{width:17px;height:17px;color:var(--gris);flex:none;transition:color .3s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.fiche:hover .fiche__valeur,.fiche:focus-visible .fiche__valeur{color:var(--bleu)}
.fiche:hover .fiche__fleche,.fiche:focus-visible .fiche__fleche{color:var(--bleu);transform:translate(4px,-4px)}

/* --------------------------------------------------------------------------
   10. Pied de page
   -------------------------------------------------------------------------- */
.pied{
  margin-top:clamp(50px,8vh,110px);
  padding:2.1rem 0 2.6rem;
  border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;align-items:baseline;justify-content:space-between;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
}
.pied a{color:var(--gris);text-decoration:none;transition:color .3s ease}
.pied a:hover,.pied a:focus-visible{color:var(--bleu)}

/* --------------------------------------------------------------------------
   11. Accessibilite
   -------------------------------------------------------------------------- */
/* Lien d'evitement, pour naviguer au clavier sans traverser tout l'en-tete.
   Il est repousse vers le haut par une transformation, et non par un decalage
   a gauche de 9999 px : ce vieux procede elargit la page de quelques pixels et
   provoque un debordement horizontal sur certaines largeurs. */
.saut{
  position:absolute;left:0;top:0;z-index:20;
  background:var(--bleu);color:#02141c;padding:.8rem 1.2rem;border-radius:0 0 8px 0;
  font-weight:600;text-decoration:none;
  transform:translateY(-140%);
  transition:transform .2s ease;
}
.saut:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:4px}
.visuellement-cache{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   12. Entrees en scene
   Par defaut tout est visible : si le script ne s'execute pas, la page reste
   entierement lisible. C'est le script qui pose la classe « js » sur la page
   et active le masquage initial.
   -------------------------------------------------------------------------- */
.js .apparait{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--retard,0ms);
}
.js .apparait.vu{opacity:1;transform:none}
.d1{--retard:80ms}
.d2{--retard:160ms}
.d3{--retard:240ms}
.d4{--retard:320ms}
.d5{--retard:400ms}
.d6{--retard:480ms}

/* --------------------------------------------------------------------------
   13. Adaptation aux ecrans
   Trois paliers : grand ecran, tablette, telephone. Les seuils sont poses la
   ou la mise en page casse, pas sur des tailles d'appareils du commerce, qui
   changent tous les ans.
   -------------------------------------------------------------------------- */

/* Trois cartes de front seulement quand chacune garde une largeur lisible. */
@media (min-width:1040px){
  .cartes{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:620px) and (max-width:1039px){
  .cartes{grid-template-columns:repeat(2,1fr)}
}

/* Tablette : la colonne d'etiquette passe au-dessus du contenu. */
@media (max-width:999px){
  .noeud__corps{grid-template-columns:1fr;gap:1rem}
  h2{max-width:24ch}
}

/* Tablette en portrait et en dessous : le portrait repasse au-dessus du nom. */
@media (max-width:899px){
  :root{--h-portrait:150px}
  .hero{--y-prise:calc(var(--pad-hero) + var(--h-portrait) + 26px)}
  .hero__tete{grid-template-columns:1fr;gap:26px}
  .hero__intro{grid-column:1;grid-row:2}
  .hero__tete > .portrait{grid-column:1;grid-row:1;justify-self:start}
  .hero__socle{grid-template-columns:1fr;gap:1.1rem}
  .hero__role{max-width:34ch}
  .hero__texte{max-width:60ch}
}

/* Telephone. */
@media (max-width:659px){
  :root{
    --h-portrait:116px;
    --pad-noeud:clamp(64px,10vh,96px);
  }
  .hero{--y-prise:calc(var(--pad-hero) + var(--h-portrait) + 22px)}
  .hero__tete{gap:22px}
  .fiche{grid-template-columns:1fr auto;gap:.35rem 1rem}
  .fiche__cle{grid-column:1 / -1}
  .questions p,.carte p{font-size:.96rem}
  .pied{gap:.5rem 1.2rem}
  .chiffres{gap:1.1rem}
}

/* Petit telephone : on retire ce qui ne tient plus, plutot que de tout tasser. */
@media (max-width:520px){
  .entete__lien--courriel{display:none}
  .coordonnees-hero{font-size:.64rem;gap:.45rem 1.1rem}
  .bouton{padding:.85rem 1.2rem;font-size:.9rem}
  .actions{gap:.55rem}
}
@media (max-width:380px){
  .sceau__mot{display:none}
  .coordonnees-hero span:nth-child(3){display:none}
}

/* Ecran tres large : la ligne de texte ne doit pas s'etirer indefiniment. */
@media (min-width:1600px){
  :root{--x-fil:64px;--gouttiere:96px}
}

/* --------------------------------------------------------------------------
   14. Mouvement reduit : reglage systeme respecte, rien ne bouge.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .apparait{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   15. Impression : la page reste lisible sur papier.
   -------------------------------------------------------------------------- */
@media print{
  body{background:#fff;color:#000}
  body::before,body::after,.fil,.prise,.entete__liens,.saut{display:none}
  .hero__ligne-2{color:#000}
  .contenu{margin:0;max-width:none}
  .carte{border:1px solid #ccc;background:none}
  .js .apparait{opacity:1;transform:none}
  a[href^="http"]::after{content:' (' attr(href) ')';font-size:.8em;color:#555}
}

/* --------------------------------------------------------------------------
   16. Page d'erreur 404
   Elle partage cette feuille de style plutot que d'avoir la sienne : une seule
   charte a maintenir, et aucun style ecrit dans la page, ce qui permet a la
   politique de securite de rester stricte.
   -------------------------------------------------------------------------- */
.erreur{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(28px,6vw,80px);
}
.erreur__bloc{position:relative;max-width:46ch}
.erreur .etiquette{display:flex;align-items:center;gap:.7rem}
.erreur .etiquette::before{
  content:'';width:9px;height:9px;border-radius:50%;background:var(--bleu);
  box-shadow:0 0 14px rgba(0,176,233,.7);flex:none;
}
.erreur h1{
  margin-top:1.5rem;
  font-size:clamp(2rem,6vw,3.4rem);font-weight:800;font-stretch:110%;
  line-height:1.04;letter-spacing:-.025em;
}
.erreur p{margin-top:1.1rem;color:var(--gris)}
.erreur .actions{margin-top:2.2rem}