/* ==========================================================================
   Anneau du Rhin - Feuille de style unique, partagee par les trois langues.
   Ne jamais dupliquer ce fichier par langue : seul le contenu HTML change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de charte
   -------------------------------------------------------------------------- */
:root {
  /* Fonds */
  --noir-carbone: #0A0A0B;
  --noir-carte: #141517;

  /* Aluminium. La charte d'origine etageait cinq gris pour hierarchiser le
     texte : titre clair, legende plus sombre. Sur la trame de carbone, meme
     assombrie, ces gris perdaient trop de lisibilite. Tout le texte passe donc
     en blanc pur, et la hierarchie repose desormais sur la taille, la graisse
     et l'espacement, jamais sur la couleur.
     Les cinq noms sont conserves : ils gardent la trace de l'intention, et il
     suffit de leur redonner une valeur distincte pour revenir en arriere. */
  --blanc: #FFFFFF;
  --alu-clair: #FFFFFF;
  --alu: #FFFFFF;
  --alu-moyen: #FFFFFF;
  --alu-sombre: #FFFFFF;
  --alu-tres-sombre: #FFFFFF;

  /* Rouge d'accent. RAL 3003 pour les surfaces et filets,
     variante eclaircie reservee au texte (contraste AA). */
  --rouge: #8D1D2C;
  --rouge-texte: #B8303F;

  /* Filets et voiles */
  --filet: rgba(200, 204, 206, 0.14);
  --filet-faible: rgba(200, 204, 206, 0.10);

  /* Typographie */
  --police-titre: "Antonio", sans-serif;
  --police-texte: "Barlow", system-ui, sans-serif;
  --police-signature: "Limelight", "Broadway", serif;

  /* Gabarit */
  --largeur-max: 1240px;
  --marge-laterale: clamp(20px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   2. Reinitialisation minimale
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Trame de fibre de carbone tressee, matiere dominante du site.

   Photographie, et non motif dessine en code. Trois tentatives en SVG ont
   echoue : le serge 2/2 reconstruit a la main gardait un air de damier, la ou
   une vraie prise de vue restitue les irregularites de fil.

   La tuile est sans couture : ses bords se raccordent, donc la mosaique ne
   laisse voir aucune ligne de jonction.
   --------------------------------------------------------------------------- */
:root {
  /* Trame de carbone tressee sans couture, fournie par le client, repetee en
     mosaique. 800 x 800 px, 184 Ko. Contrairement a la premiere photo, ses
     quatre bords se raccordent exactement : la repetition devient invisible,
     quelle que soit la taille d'affichage. */
  --trame-carbone: url("../img/trame-carbone-2.jpg");

  /* Les mailles claires de la photo sortent a un gris moyen, trop lumineux
     derriere du texte. La couche de trame est donc rendue partiellement
     transparente : le noir carbone du corps remonte au travers et l'assombrit
     sans la ternir. 1 rend la photo telle quelle, 0 l'efface. */
  --intensite-carbone: .32;

  /* Teinte moyenne du fond, une fois la trame affichee a l'intensite ci-dessus.
     Ses fils clairs sortent alors autour de 42, ses fils sombres restent au
     niveau du noir carbone, et l'oeil percoit la moyenne des deux. C'est cette
     valeur, et non celle des fils clairs, que doit viser le fondu du bas des
     photos d'en-tete : viser les fils clairs poserait une bande visiblement
     plus claire que la matiere dans laquelle elle est censee disparaitre.
     Donnee en composantes separees pour rester utilisable dans un rgba().
     A recalculer si --intensite-carbone change. */
  --gris-fondu: 25, 26, 28;

  /* Hauteur au-dessous de laquelle une photo d'en-tete ne descend plus : celle
     de la barre logo et menu, que la photo doit toujours atteindre pour que le
     carbone ne remonte jamais derriere eux. La barre mesure 107 px tant qu'elle
     tient sur une ligne ; sous 430 px de large, ses outils passent sous le logo
     et elle grimpe a 171 px, d'ou la seconde valeur. */
  --plancher-hero: 120px;

  /* Reflet neutralise : degrade entierement transparent, donc sans effet.
     Aucun des reglages essayes n'etait assez perceptible, et la trame a ete
     validee sans lui. Sujet reporte en v2, voir MEMO-V2.md point 6.2, qui
     garde le raisonnement et les pistes non explorees. */
  --reflet-carbone: linear-gradient(118deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
}

body {
  margin: 0;
  color: var(--alu);
  font-family: var(--police-texte);
  font-weight: 400;
  overflow-x: clip;
  /* L'allemand produit des mots tres longs : on autorise la cesure partout. */
  hyphens: auto;
  overflow-wrap: break-word;

  /* Seul le reflet est porte par le corps : la trame vient de ::before,
     pour pouvoir etre inclinee. Le reflet est fixe, comme une lumiere posee
     sur la piece plutot qu'imprimee dessus. */
  background-color: var(--noir-carbone);
  background-image: var(--reflet-carbone);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* La trame vit dans une couche a part, fixe, derriere tout le contenu. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--trame-carbone);
  /* La photo compte 32 mailles sur ses 800 px. Affichee a 400 px, soit la
     moitie exacte de sa taille native, chaque maille mesure 12,5 px : assez
     lisible pour qu'on reconnaisse le tressage, assez fine pour rester un
     fond. Diviser ou doubler cette valeur garde un rendu net. */
  background-size: 400px 400px;
  opacity: var(--intensite-carbone);
  /* Aucune rotation : la trame est deja inclinee dans la photo. */
}

img { max-width: 100%; }

a {
  color: var(--alu);
  text-decoration: none;
  border-bottom: 1px solid var(--rouge);
  transition: border-color .25s ease, color .25s ease;
}

a:hover,
a:focus-visible {
  color: var(--blanc);
  border-bottom: 2px solid var(--rouge-texte);
}

/* Focus clavier visible sur tout element interactif. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--rouge-texte);
  outline-offset: 3px;
}

.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding-left: var(--marge-laterale);
  padding-right: var(--marge-laterale);
}

/* --------------------------------------------------------------------------
   3. Barre de progression de lecture
   -------------------------------------------------------------------------- */
.progression {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: var(--filet-faible);
  pointer-events: none;
}

.progression__jauge {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rouge);
  transition: width .12s linear;
}

/* --------------------------------------------------------------------------
   4. Identite de marque et selecteur de langue
   -------------------------------------------------------------------------- */
.identite {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Le logo fourni est un JPEG sur fond sombre : le recadrage et le
   mix-blend-mode suppriment visuellement son fond. */
.identite__logo {
  position: relative;
  width: 134px;
  aspect-ratio: 1.385;
  overflow: hidden;
  flex: none;
}

.identite__logo img {
  position: absolute;
  /* Le recadrage exige que l'image deborde de sa fenetre : la limite
     generale max-width:100% doit donc etre levee ici. */
  max-width: none;
  width: 139%;
  left: -19.4%;
  top: -52%;
  mix-blend-mode: screen;
}

.identite__signature {
  display: block;
  width: 89px;
  margin-top: -8px;
  text-align: center;
  font-family: var(--police-signature);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--blanc);
  white-space: nowrap;
}

.langues {
  display: flex;
  align-items: center;
  /* Chaque drapeau occupe une zone tactile de 44 px pour un visuel de 26 px,
     soit 9 px de vide de chaque cote. On decale la rangee d'autant pour que
     le bord VISIBLE du dernier drapeau tombe sur celui du bouton Menu. */
  margin-right: -9px;
}

.langues__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* zone tactile minimale */
  height: 44px;
  border-bottom: none;
  opacity: .55;
  transition: opacity .25s ease;
}

.langues__lien:hover,
.langues__lien:focus-visible { opacity: 1; border-bottom: none; }

.langues__lien[aria-current="true"] { opacity: 1; cursor: default; }

.drapeau {
  display: block;
  width: 26px;
  height: 17px;
  border-radius: 2px;
  border: 1px solid rgba(200, 204, 206, .18);
  /* Par defaut, un fond se dessine a l'interieur de la bordure mais se repete
     jusqu'au bord exterieur. Le degrade, plus etroit que la boite de deux
     pixels, se repetait donc : sa fin reapparaissait du cote oppose, en fine
     ligne rouge a gauche du drapeau francais et jaune au-dessus de l'allemand.
     On l'ancre sur la boite exterieure et on interdit la repetition. */
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.langues__lien[aria-current="true"] .drapeau { border-color: rgba(200, 204, 206, .35); }

/* background-image et non background : le raccourci reinitialiserait l'ancrage
   et la non-repetition regles juste au-dessus, et les lignes parasites
   reviendraient. */
.drapeau--fr { background-image: linear-gradient(to right, #22346B 0 33.33%, #F4F4F4 33.33% 66.66%, #A32334 66.66% 100%); }
.drapeau--de { background-image: linear-gradient(to bottom, #1A1A1A 0 33.33%, #A32334 33.33% 66.66%, #E8C33B 66.66% 100%); }
.drapeau--en {
  background-color: #22346B;
  background-image:
    linear-gradient(to bottom, transparent 38%, #A32334 38% 62%, transparent 62%),
    linear-gradient(to right, transparent 38%, #A32334 38% 62%, transparent 62%),
    linear-gradient(to bottom, transparent 28%, #F4F4F4 28% 72%, transparent 72%),
    linear-gradient(to right, transparent 28%, #F4F4F4 28% 72%, transparent 72%),
    linear-gradient(33deg, transparent 46%, #A32334 46% 54%, transparent 54%),
    linear-gradient(-33deg, transparent 46%, #A32334 46% 54%, transparent 54%),
    linear-gradient(33deg, transparent 41%, #F4F4F4 41% 59%, transparent 59%),
    linear-gradient(-33deg, transparent 41%, #F4F4F4 41% 59%, transparent 59%);
}

/* --------------------------------------------------------------------------
   5. Bouton d'ouverture du menu
   -------------------------------------------------------------------------- */
.bouton-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Pas de largeur fixe : le libelle allemand est plus long. */
  min-width: 116px;
  min-height: 48px;
  padding: 0 12px;
  margin-top: 2px;
  cursor: pointer;
  background: none;
  border: 2px solid var(--blanc);
  border-radius: 10px;
  color: var(--blanc);
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
  transition: background .25s ease;
}

.bouton-menu:hover { background: rgba(141, 29, 44, .22); }

.bouton-menu__barres {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}

.bouton-menu__barres span {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--blanc);
  transition: transform .3s ease, opacity .2s ease;
}

/* Menu ouvert : les trois barres deviennent une croix. La barre du milieu
   s'efface, les deux autres se rejoignent au centre et pivotent. Les 9 px de
   deplacement sont la distance exacte de chaque barre au centre du groupe. */
.bouton-menu[aria-expanded="true"] .bouton-menu__barres span:first-child {
  transform: translateY(9px) rotate(45deg);
}

.bouton-menu[aria-expanded="true"] .bouton-menu__barres span:nth-child(2) {
  opacity: 0;
}

.bouton-menu[aria-expanded="true"] .bouton-menu__barres span:last-child {
  transform: translateY(-9px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Menu plein ecran
   -------------------------------------------------------------------------- */
/* Le menu n'occulte plus la page : il se deroule en panneau sous le bouton qui
   l'ouvre. La couche qui couvre la page entiere est entierement transparente,
   elle ne sert qu'a recueillir les clics de fermeture. La page garde donc ses
   couleurs et sa nettete pendant la consultation du menu.

   La visibilite ne s'eteint qu'au terme du deroulement inverse, sans quoi le
   panneau disparaitrait d'un coup au lieu de s'enrouler. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: transparent;
  visibility: hidden;
  transition: visibility 0s linear .45s;
}

.menu[data-ouvert="true"] {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

/* Ouvert au simple survol, le menu ne doit rien confisquer : les clics
   traversent le voile, seul le panneau les recoit. Il n'en va autrement que
   lorsqu'un clic a verrouille l'ouverture. */
.menu[data-mode="survol"] { pointer-events: none; }
.menu[data-mode="survol"] .menu__interieur { pointer-events: auto; }

/* Le panneau s'aligne sur le bouton menu : meme bord droit que la barre de
   l'en-tete, qui est centree et plafonnee a la largeur du site. La formule
   suit ce bord tant que la fenetre est plus large que le site, puis retombe
   sur la simple marge laterale. */
.menu__interieur {
  position: absolute;
  top: 62px;
  right: max(var(--marge-laterale), calc(50% - var(--largeur-max) / 2 + var(--marge-laterale)));
  /* Jamais plus de la moitie de l'ecran : la page reste lisible a cote du
     menu, meme sur un telephone. La butee de 380 px prend le relais des que
     l'ecran depasse 760 px de large. */
  width: min(380px, 50vw);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 10px 18px 18px;
  /* Voile sombre translucide, sans flou : on lit le menu tout en distinguant
     la page qui continue dessous. */
  background: rgba(12, 13, 15, .68);
  /* Meme cadre que les visuels du site : filet rouge de 3 px et angles
     arrondis, pour que le panneau appartienne visiblement a la meme famille. */
  border: 3px solid rgba(141, 29, 44, .6);
  border-radius: 14px;
  /* Deroulement : le panneau est masque par le bas, puis se decouvre vers le
     bas. Le texte n'est ni etire ni deforme, contrairement a une mise a
     l'echelle verticale. La meme transition joue a l'envers a la fermeture, et
     le panneau s'enroule comme il s'etait deroule. */
  clip-path: inset(0 0 100% 0 round 14px);
  transition: clip-path .45s ease;

  /* La barre de defilement du panneau est masquee : le contenu defile encore,
     a la molette comme au doigt, mais aucun rail gris ne vient couper le
     bord droit. */
  scrollbar-width: none;
}

.menu__interieur::-webkit-scrollbar { display: none; }

.menu[data-ouvert="true"] .menu__interieur { clip-path: inset(0 round 14px); }

/* Sous 700 px, la demi-largeur devient etroite : la typographie se resserre
   pour que les intitules les plus longs tiennent sans se disloquer. */
@media (max-width: 700px) {
  .menu__interieur { padding: 8px 12px 14px; }
  .menu__lien,
  .menu__intitule { font-size: 16px; letter-spacing: .02em; }
  .menu__sous-lien { font-size: 12px; letter-spacing: .08em; padding-left: 12px; }
}


.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.menu__groupe {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Entree de premier niveau, cliquable ou non. */
.menu__lien,
.menu__intitule {
  display: block;
  /* 44 px : la zone tactile minimale, et non plus la hauteur d'un titre de
     page. Le menu tenait la page entiere, il tient maintenant dans un panneau
     de 380 px. */
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--police-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 19px;
  line-height: 1.15;
}

/* Menu ouvert : toutes les lignes sont en blanc pur, sans hierarchie de
   teinte. Les intitules de groupe restent distingues par leur filet rouge. */
.menu__lien {
  color: var(--blanc);
  border-bottom: 1px solid rgba(200, 204, 206, .12);
  transition: color .25s ease, padding-left .25s ease;
}

.menu__lien:hover,
.menu__lien:focus-visible {
  color: var(--blanc);
  padding-left: 14px;
  border-bottom: 1px solid var(--rouge);
}

/* Un intitule de groupe n'est pas un lien : il ouvre une liste. */
.menu__intitule {
  color: var(--blanc);
  padding-bottom: 8px;
  background-image: linear-gradient(var(--rouge), var(--rouge));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

.menu__sous-lien {
  display: block;
  min-height: 40px;
  padding: 9px 0 9px 18px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--blanc);
  border-bottom: 1px solid var(--filet-faible);
  transition: color .25s ease, padding-left .25s ease;
}

.menu__sous-lien:hover,
.menu__sous-lien:focus-visible {
  color: var(--blanc);
  padding-left: 32px;
  border-bottom: 1px solid var(--rouge);
}

/* --------------------------------------------------------------------------
   7. En-tete de page
   -------------------------------------------------------------------------- */
.entete { position: relative; }

.entete__visuel { position: relative; overflow: hidden; }

/* La hauteur suit la largeur de l'ecran, et non plus sa hauteur.

   Deux comportements coexistaient. Sur l'accueil, retrecir la fenetre faisait
   baisser la photo et remonter le carbone. Sur les treize autres, la photo
   gardait sa hauteur et c'est son cadrage qui se resserrait, montrant une
   tranche de plus en plus etroite. On garde ici le premier, avec le recadrage
   du second : la photo baisse ET se recadre, le carbone remonte.

   La descente s'arrete au plancher defini en tete de feuille, la hauteur de la
   barre logo et menu : la photo vient affleurer sous eux, jamais plus haut. Le
   plafond de 600 px evite qu'un tres grand ecran ne transforme l'en-tete en
   pleine page.

   Une hauteur fixe de 380 px identique partout avait ete essayee avant : elle
   obligeait a recadrer aussi le bandeau de l'accueil, qui n'y survivait pas.

   Le chevron d'enfant direct est indispensable : le logo est lui aussi une
   image de l'en-tete, mais imbriquee plus bas, et ne doit pas etre touche. */
.entete__visuel > img {
  display: block;
  width: 100%;
  height: clamp(var(--plancher-hero), 26vw, 600px);
  object-fit: cover;
  object-position: 50% 50%;
}

/* Sous 430 px, les outils passent sous le logo et la barre grandit : le
   plancher suit, sans quoi le carbone repasserait derriere le menu. */
@media (max-width: 430px) {
  :root { --plancher-hero: 180px; }
}

/* L'accueil affiche son bandeau en entier, sans recadrage : sa hauteur suit
   donc son propre rapport de forme, six fois et demie plus large que haut,
   plutot que la regle commune.

   Avec une seule reserve, et c'est elle qui manquait : il ne descend pas sous
   le plancher. Sur un ecran etroit, ce bandeau tomberait a quelques dizaines
   de pixels de haut et le carbone remonterait derriere le logo et le menu.
   Arrive au plancher, il cesse de baisser et se recadre, comme les autres. */
.entete--accueil .entete__visuel > img {
  height: auto;
  min-height: var(--plancher-hero);
  object-fit: cover;
}

.entete--accueil .entete__voile-bas { height: 13%; }

/* Voile haut : rend la barre d'outils lisible sur toute photo. */
.entete__voile-haut,
.entete__voile-bas {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.entete__voile-haut {
  top: 0;
  height: 46%;
  background: linear-gradient(to bottom, rgba(10, 10, 11, .78) 0%, rgba(10, 10, 11, 0) 100%);
}

/* Un fondu en deux temps, comme demande.
   1. La photo s'assombrit d'abord sous un voile noir qui monte en puissance.
   2. Puis elle s'efface, laissant apparaitre la trame de carbone.
   Le voile disparait lui aussi en bas, sans quoi il masquerait le carbone. */
.entete__voile-bas {
  bottom: 0;
  /* Fondu resserre : il occupait pres de la moitie de la photo, il en prend
     desormais moins d'un tiers. Le sujet de la photo respire davantage. */
  height: 30%;
  /* Voile gris plutot que noir : la teinte est celle du fond de carbone tel
     qu'il apparait reellement, si bien que la photo se fond dans la matiere au
     lieu de s'enfoncer dans du noir. Elle suit donc --gris-fondu, et non plus
     une valeur ecrite en dur : la trame ayant ete assombrie, l'ancien gris
     dessinait une bande plus claire que le fond qu'il devait rejoindre. */
  background: linear-gradient(to bottom,
    rgba(var(--gris-fondu), 0) 0%,
    rgba(var(--gris-fondu), .55) 38%,
    rgba(var(--gris-fondu), .82) 62%,
    rgba(var(--gris-fondu), .45) 84%,
    rgba(var(--gris-fondu), 0) 100%);
}

/* Second temps : effacement progressif de la photo elle-meme. */
.entete__visuel > img {
  /* L'effacement demarre a 80 % de la hauteur au lieu de 70 % : il suit le
     resserrement du voile, sans quoi la photo s'effacerait plus haut que la
     zone assombrie et le raccord se verrait. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 80%, rgba(0, 0, 0, .5) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 80%, rgba(0, 0, 0, .5) 92%, transparent 100%);
}

/* Retrait haut ramene de 10 a 4 px : le logo remonte legerement,
   sans se coller au bord. */
.entete__barre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 4px var(--marge-laterale);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.entete__outils {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.titre-page {
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  /* Aucun retrait haut : le titre remonte jusqu'au bas de la photo, la ou son
     fondu s'acheve. Seule la hauteur de ligne d'Antonio, tres serree, le
     separe encore du visuel. */
  margin: 0;
  font-size: clamp(34px, 7vw, 86px);
  color: var(--blanc);
  background-image: linear-gradient(var(--rouge), var(--rouge));
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .24em;
}

/* --------------------------------------------------------------------------
   8. Sections
   -------------------------------------------------------------------------- */
/* Aucun filet entre les sections. Il y en avait un, herite de la maquette :
   un trait clair d'un pixel. La hauteur d'une section n'etant jamais un nombre
   entier de pixels, ses retraits dependant de la largeur de l'ecran, ce trait
   tombait entre deux pixels physiques et se rendait sur deux lignes grises au
   lieu d'une. D'ou son aspect flou, et son scintillement au defilement.

   Il ne manque pas : l'espace et le changement de matiere separent deja les
   sections. */
.section {
  padding: clamp(40px, 7vw, 88px) 0;
}

.section--compacte { padding: clamp(28px, 4vw, 44px) 0; }

/* Accueil : la phrase d'accueil et la grille de marques suivent la photo de
   pres. Le retrait haut d'une section ordinaire creusait un vide entre les
   deux. */
.section--accueil { padding-top: 0; }

.surtitre {
  display: block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--alu-sombre);
  margin-bottom: 18px;
}

.note {
  max-width: 56ch;
  margin: clamp(24px, 3vw, 32px) 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--alu-sombre);
  border-left: 2px solid var(--rouge);
  padding-left: 16px;
}

/* --------------------------------------------------------------------------
   9. Grille des manifestations
   -------------------------------------------------------------------------- */
.grille-evenements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

.evenement {
  display: flex;
  flex-direction: column;
  background: var(--noir-carte);
  border: 3px solid rgba(141, 29, 44, .6);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.evenement:hover,
.evenement:focus-within {
  transform: translateY(-6px);
  border-color: var(--rouge);
  box-shadow: 0 24px 44px rgba(0, 0, 0, .5);
}

.evenement__affiche {
  aspect-ratio: .72;
  overflow: hidden;
  background: var(--noir-carbone);
}

.evenement__affiche img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.evenement__corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 20px 20px 24px;
}

.evenement__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.evenement__date {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--alu-clair);
}

/* Separateur entre la date et la discipline. Pastille ronde et non plus tiret,
   le nom de classe est conserve pour ne pas toucher au HTML genere. */
.evenement__tiret {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rouge);
}

.evenement__discipline {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alu-sombre);
}

.evenement__titre {
  font-family: var(--police-titre);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 24px;
  line-height: 1.05;
  margin: 0;
  color: var(--blanc);
  background-image: linear-gradient(var(--rouge), var(--rouge));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .3em;
}

.evenement__texte {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--alu-moyen);
}

.evenement__acces {
  margin-top: auto;
  padding-top: 12px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alu-tres-sombre);
}

.evenement__acces--ouvert { color: var(--rouge-texte); }

/* --------------------------------------------------------------------------
   9 bis. Grille des marques (boutique de demonstration, accueil)
   Chaque carte represente une MARQUE, jamais un modele precis.
   -------------------------------------------------------------------------- */
.grille-marques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 44%), 1fr));
  gap: clamp(14px, 4vw, 44px);
  padding-top: clamp(10px, 1.5vw, 16px);
}

.marque {
  position: relative;
  background: var(--noir-carte);
  border: 3px solid rgba(141, 29, 44, .6);
  border-radius: 20px;
  padding: 6px 16px 10px;
  margin-top: 8px;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}

.marque:hover,
.marque:focus-within {
  transform: translateY(-6px);
  background: #191A1D;
  border-color: var(--rouge);
  box-shadow: 0 26px 48px rgba(0, 0, 0, .55);
}

.marque__visuel {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 206px;
  border-radius: 10px;
  overflow: hidden;
}

/* Le logo de la marque est en filigrane, DERRIERE le vehicule. */
.marque__logo {
  position: absolute;
  left: 0;
  top: 5%;
  height: 41%;
  width: auto;
  max-width: 29%;
  object-fit: contain;
  object-position: left top;
  opacity: .85;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.marque__image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.marque__texte {
  text-align: center;
  margin-top: 2px;
}

.marque__nom {
  display: block;
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--alu-clair);
}

.marque__tarif {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(200, 204, 206, .12);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.marque__mention {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--alu-tres-sombre);
  white-space: nowrap;
}

/* Le montant est du texte : variante eclaircie du rouge, jamais le RAL 3003 pur. */
.marque__prix {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 24px;
  color: var(--rouge-texte);
}

/* Titre presente aux seuls lecteurs d'ecran. */
.sr-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   8 bis. Titre pose au bas du visuel, navigation par ancres, fiches
   -------------------------------------------------------------------------- */

/* Barre d'ancres : reste sous la barre de progression au defilement. */
.ancres {
  position: sticky;
  top: 3px;
  z-index: 40;
  background: rgba(10, 10, 11, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}

.ancres__piste {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--marge-laterale);
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.ancres__lien {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 52px;
  padding: 0 6px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--alu);
  border-bottom: 2px solid transparent;
}

.ancres__lien:hover,
.ancres__lien:focus-visible {
  color: var(--blanc);
  border-bottom: 2px solid var(--rouge);
}

/* La cible d'une ancre ne doit pas passer sous la barre collante. */
.section[id] { scroll-margin-top: 58px; }

/* Cadre du trace de piste. */
.trace {
  background: var(--noir-carte);
  border-radius: 14px;
  border: 3px solid rgba(141, 29, 44, .6);
  padding: clamp(12px, 1.6vw, 18px);
}

/* Le trait se revele de gauche a droite, comme s'il se dessinait. */
.trace img {
  display: block;
  width: 100%;
  animation: tracer 2.2s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes tracer {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Fiche technique : cellules separees par un filet d'un pixel.
   Trois colonnes fixes : les six informations tombent en deux rangees
   regulieres, sans reflux disgracieux selon la largeur disponible. */
.fiche {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(200, 204, 206, .12);
  border: 1px solid rgba(200, 204, 206, .12);
}

/* Sous 420 px, trois colonnes tasseraient trop les valeurs. */
@media (max-width: 420px) {
  .fiche { grid-template-columns: repeat(2, 1fr); }
}

.fiche__cellule {
  background: #0F1011;
  padding: 4px 14px 3px;
}

.fiche__cellule dt {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alu-sombre);
  margin-bottom: 3px;
}

/* Valeurs en RAL 3003. Le rouge pur est reserve ailleurs aux surfaces et aux
   filets, jamais au texte : sur fond noir il tombe a 2,2 pour 1 de contraste,
   la ou le seuil d'accessibilite est a 4,5. La graisse d'Antonio le rattrape a
   l'oeil sans changer la mesure. Si la lecture souffre, la variante eclaircie
   --rouge-texte monte a 3,5 pour 1 et se substitue en un mot. */
.fiche__cellule dd {
  margin: 0;
  font-family: var(--police-titre);
  /* 700 plutot que 600 : la graisse compense en partie la faiblesse du rouge
     pur sur fond noir. C'est le poids le plus lourd charge pour Antonio. */
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--rouge);
}

/* --------------------------------------------------------------------------
   9 ter. Blocs de contenu, listes et galeries
   -------------------------------------------------------------------------- */

/* Chapeau introductif d'une page. */
.intro {
  max-width: 56ch;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--alu-moyen);
  text-wrap: pretty;
  border-left: 2px solid var(--rouge);
  padding-left: clamp(16px, 2.5vw, 28px);
}

/* Titre de grande section, souligne d'un filet rouge. */
.titre-bloc {
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  margin: 0 0 clamp(20px, 3vw, 28px);
  font-size: clamp(30px, 4.6vw, 58px);
  color: var(--blanc);
  background-image: linear-gradient(var(--rouge), var(--rouge));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .3em;
}

/* Texte et liste cote a cote, empiles sous 420 px. */
.bloc__corps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.bloc__texte {
  margin: 0;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--alu-moyen);
  text-wrap: pretty;
  border-left: 2px solid var(--rouge);
  padding-left: 16px;
}

/* Liste a puces : la puce est une pastille ronde rouge. */
.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.points li {
  display: flex;
  align-items: flex-start;
  /* 17 px et non plus 14 : la pastille etant plus etroite que le tiret
     qu'elle remplace, l'ecart compense et le texte reste ou il etait. */
  gap: 17px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--alu);
}

/* Le retrait haut place le centre de la pastille sur celui de la premiere
   ligne de texte, et non sur son sommet. */
.points li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 8px;
  background: var(--rouge);
}

/* Galerie de vignettes. */
.galerie {
  margin-top: clamp(24px, 4vw, 40px);
}

.galerie__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 20px);
}

.galerie__vignette {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 3px solid rgba(141, 29, 44, .6);
  border-radius: 8px;
  overflow: hidden;
  background: #0F1011;
}

.galerie__vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Emplacement photo non encore fourni : cadre pointille explicite. */
.galerie__attente {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(200, 204, 206, .28);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--alu-tres-sombre);
}

/* --------------------------------------------------------------------------
   9 quater. Fond carbone, cartes d'exercice, listes en colonnes
   -------------------------------------------------------------------------- */

/* Carte d'exercice : photo en haut, titre souligne, texte court. */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

.carte {
  background: var(--noir-carte);
  border: 3px solid rgba(141, 29, 44, .6);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.carte:hover,
.carte:focus-within {
  transform: translateY(-6px);
  border-color: var(--rouge);
  box-shadow: 0 24px 44px rgba(0, 0, 0, .5);
}

.carte__visuel {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0F1011;
}

.carte__visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte__corps { padding: clamp(16px, 2.2vw, 22px); }

/* Dans une carte, seul le soulignement du titre porte le rouge :
   pas de filet vertical sur le texte, contrairement aux paves hors carte. */
.carte__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--alu-clair);
  background-image: linear-gradient(var(--rouge), var(--rouge));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .3em;
}

.carte__texte {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--alu-moyen);
}

/* Liste longue repartie sur plusieurs colonnes. */
.points--colonnes {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px 32px;
}

.points--large li { font-size: 15px; }
.points--large li::before { margin-top: 9px; }

/* Image encadree, sans galerie. */
.visuel-encadre {
  border: 3px solid rgba(141, 29, 44, .6);
  border-radius: 8px;
  overflow: hidden;
}

.visuel-encadre img { display: block; width: 100%; }

.visuel-encadre--43 img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Suite de paragraphes, chacun avec son filet vertical rouge. */
.paves {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  align-content: start;
}

/* Le bouton d'action existe aussi en lien. */
a.bouton {
  min-height: 48px;
  padding: 0 26px;
  color: var(--blanc);
  border-bottom: none;
}

a.bouton:hover,
a.bouton:focus-visible {
  background: #A32334;
  color: var(--blanc);
  border-bottom: none;
}

.bouton--suite { margin-top: clamp(24px, 3vw, 36px); }

/* --------------------------------------------------------------------------
   10. Bandeau partenaires
   -------------------------------------------------------------------------- */
.partenaires__piste {
  border-top: 1px solid rgba(200, 204, 206, .12);
  border-bottom: 1px solid rgba(200, 204, 206, .12);
  padding: 22px 0;
  overflow: hidden;
}

/* La liste est dupliquee dans le HTML : la translation de -50%
   ramene donc exactement au point de depart, sans saut visible. */
.partenaires__defile {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: defile 26s linear infinite;
}

.partenaires__defile img {
  display: block;
  width: auto;
  flex: none;
  align-self: center;
  opacity: .72;
  transition: opacity .25s ease;
}

.partenaires__defile img:hover { opacity: 1; }

/* La serie de logos est repetee quatre fois par le generateur : la piste
   revient donc a son point de depart apres un quart de sa largeur, et la
   boucle est invisible. Ce -25 % doit rester accorde a REPETITIONS_PARTENAIRES
   dans outils/gabarit.js. */
@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* --------------------------------------------------------------------------
   10 bis. Formulaires et surcouche de contact
   -------------------------------------------------------------------------- */
input,
select,
textarea {
  font-family: var(--police-texte);
  font-size: 15px;
  color: var(--alu-clair);
  background: #0F1011;
  border: 1px solid rgba(200, 204, 206, .22);
  border-radius: 3px;
  padding: 0 14px;
  height: 52px;
  width: 100%;
}

textarea {
  height: auto;
  min-height: 132px;
  padding: 14px;
  line-height: 1.6;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--rouge);
}

/* Seul texte volontairement non blanc du site : un indice de saisie doit
   rester distinguable d'une valeur reellement tapee par le visiteur. */
input::placeholder,
textarea::placeholder { color: #9BA1A4; }

.champ {
  display: grid;
  gap: 8px;
}

.champ__intitule {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alu-sombre);
}

/* Bouton d'action principal : seul emploi du rouge en aplat. */
.bouton {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 52px;
  padding: 0 30px;
  background: var(--rouge);
  color: var(--blanc);
  font-family: var(--police-texte);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background .25s ease;
}

.bouton:hover { background: #A32334; }

/* Surcouche : le formulaire s'ouvre par-dessus la page. */
.surcouche {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(10, 10, 11, .92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.surcouche[data-ouvert="true"] { opacity: 1; visibility: visible; }

.surcouche__boite {
  width: min(680px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--noir-carte);
  border: 3px solid rgba(141, 29, 44, .6);
  border-radius: 16px;
  padding: clamp(22px, 4vw, 40px);
}

.surcouche__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 3vw, 26px);
}

.surcouche__fermer {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background: none;
  border: none;
}

.surcouche__fermer span {
  position: absolute;
  width: 26px;
  height: 3px;
  background: var(--alu-clair);
}

.surcouche__fermer span:first-child { transform: rotate(45deg); }
.surcouche__fermer span:last-child { transform: rotate(-45deg); }

.formulaire {
  display: grid;
  gap: clamp(14px, 2.2vw, 20px);
}

.formulaire__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 4px;
}

.formulaire__etat {
  font-size: 13px;
  color: var(--alu-tres-sombre);
}

/* Deux colonnes qui passent en pile sur petit ecran. */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* Bloc d'adresse en gros caracteres, avec filet vertical rouge. */
.adresse {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--alu-clair);
  border-left: 2px solid var(--rouge);
  padding-left: clamp(16px, 2.5vw, 24px);
}

/* Pave de texte courant hors carte : filet vertical rouge a gauche. */
.pave {
  margin: 0 0 clamp(20px, 3vw, 28px);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--alu-moyen);
  border-left: 2px solid var(--rouge);
  padding-left: 16px;
}

.lien-suite {
  margin: clamp(20px, 3vw, 28px) 0 0;
  font-size: 14px;
}

.titre-section {
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0;
  font-size: clamp(24px, 4vw, 38px);
  color: var(--blanc);
  background-image: linear-gradient(var(--rouge), var(--rouge));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .3em;
  flex: 1;
}

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--filet);
  padding: clamp(32px, 5vw, 56px) 0;
}

.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.pied__colonne {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* La derniere colonne, celle des mentions, se cale contre le bord droit du
   pied. Seulement quand les colonnes sont cote a cote : une fois empilees sur
   petit ecran, un texte aligne a droite sous un texte aligne a gauche
   paraitrait deregle. */
@media (min-width: 700px) {
  .pied__colonne:last-child {
    justify-items: end;
    text-align: right;
  }
}

.pied__titre {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alu-tres-sombre);
  margin-top: 6px;
}

.pied__lien {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--alu-moyen);
  border-bottom: none;
}

.pied__lien--secondaire {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: none;
  padding-left: 14px;
}

.pied__lien:hover,
.pied__lien:focus-visible { color: var(--blanc); border-bottom: none; }

.pied__mention {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--alu-tres-sombre);
}

.pied__copyright { margin-top: 8px; color: var(--alu-sombre); }

/* --------------------------------------------------------------------------
   12. Accessibilite : animations desactivables
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Grille de cartes placee apres un bloc de texte. */
.grille-cartes--suite { margin-top: clamp(24px, 4vw, 40px); }

/* Emplacement photo non fourni, dans une carte. */
.carte__visuel--attente {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed rgba(200, 204, 206, .28);
  padding: 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--alu-tres-sombre);
}

/* Carte sans visuel : le rembourrage remplace la photo. */
.carte--texte .carte__corps { padding: clamp(18px, 2.5vw, 24px); }

/* Liste placee sous un paragraphe, dans la meme colonne. */
.points--apres-texte { margin-top: clamp(16px, 2.4vw, 22px); }

.visuel-encadre--32 img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Deux colonnes centrees verticalement l une par rapport a l autre. */
.bloc__corps--centre { align-items: center; }

/* Note plus large et plus lisible que la note de bas de section. */
.note--large {
  max-width: 66ch;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--alu-moyen);
}

/* Le plan d acces est un document sur fond blanc : on ne l assombrit pas. */
.visuel-encadre--clair { background: var(--blanc); }

/* Bouton presente mais sans action : ni curseur main, ni survol. */
.bouton--inerte { cursor: default; }
.bouton--inerte:hover { background: var(--rouge); }

/* --------------------------------------------------------------------------
   Entree en scene au defilement

   Les blocs ne montent plus tous de la meme facon : ils arrivent de la gauche
   et de la droite en alternance, ce qui fait respirer la page au lieu de la
   faire defiler d'un bloc. Dans un bloc a deux colonnes, la premiere vient de
   la gauche et la seconde de la droite : les deux moities se rejoignent.

   Les titres et surtitres arrivent eux aussi de cote, mais toujours par la
   gauche : leur filet rouge se trace dans ce sens, et un titre entrant a
   contresens de son propre soulignement se contrarierait lui-meme.

   L'etat de depart n'est pose que par le script : sans JavaScript, aucun
   attribut n'est ajoute et la page s'affiche entiere. Une page dont le contenu
   resterait invisible faute de script serait un defaut bien pire que l'absence
   d'animation.
   -------------------------------------------------------------------------- */
/* Mise en attente immediate, des l'entete de la page.

   Sans elle, les blocs deja presents a l'ecran au chargement apparaissaient,
   puis etaient masques par le script, puis revenaient. Le script arrive apres
   le premier affichage : il est trop tard pour cacher quoi que ce soit.

   La regle cesse d'elle-meme des que le script a marque un bloc, grace au
   :not([data-anime]). Aucun !important n'est donc necessaire, et rien ne reste
   masque si le script n'a pas fait son travail : l'entete retire la marque au
   bout de deux secondes s'il ne repond pas. */
.anime-actif main .section:not(.section--partenaires) .conteneur > :not(.bloc__corps):not([data-anime]),
.anime-actif main .section:not(.section--partenaires) .conteneur > .bloc__corps > :not([data-anime]),
.anime-actif .titre-page:not([data-anime]) {
  opacity: 0;
  transform: translateX(-52px);
}

[data-anime] {
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22, .68, .28, 1);
}

[data-anime="gauche"],
[data-anime="droite"] { opacity: 0; }

[data-anime="gauche"] { transform: translateX(-52px); }
[data-anime="droite"] { transform: translateX(52px); }

[data-anime="visible"] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Filet rouge des titres, trace a l'entree

   Le filet est dessine avec le fond du titre : l'animer revient a etendre ce
   fond de zero a toute la largeur. Il part avec un leger retard sur la section
   qui le porte, pour qu'on voie le trait se tirer une fois le titre en place.
   -------------------------------------------------------------------------- */
/* La liste reprend le glissement declare sur [data-anime] : une seconde regle
   "transition" sur le meme element ne complete pas la premiere, elle la
   remplace. Sans ces trois lignes, les titres n'animaient plus que leur filet
   et surgissaient sur place au lieu d'arriver de la gauche. */
.titre-page[data-filet],
.titre-bloc[data-filet],
.titre-section[data-filet] {
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(.22, .68, .28, 1),
    background-size 1.1s ease .45s;
}

.titre-page[data-filet="attente"] { background-size: 0% 3px; }

.titre-bloc[data-filet="attente"],
.titre-section[data-filet="attente"] { background-size: 0% 2px; }

/* --------------------------------------------------------------------------
   Reaction au survol des visuels encadres

   Les cartes de marques et les cartes de contenu se soulevaient au passage de
   la souris, leur filet rouge s'allumait et une ombre se creusait dessous. Le
   meme mouvement s'applique desormais a tous les visuels portant ce cadre
   rouge : traces de circuit, vignettes de galerie, images encadrees.

   Deux familles en restent exclues, et pour deux raisons differentes. Les
   photos d'en-tete ne sont pas des objets poses sur la page, elles en sont le
   fond : les soulever n'aurait aucun sens. Les drapeaux sont des commandes, et
   possedent deja leur propre reaction.
   -------------------------------------------------------------------------- */
.trace,
.galerie__vignette,
.visuel-encadre {
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.trace:hover,
.galerie__vignette:hover,
.galerie__vignette:focus-within,
.galerie__vignette:focus-visible,
.visuel-encadre:hover {
  transform: translateY(-6px);
  border-color: var(--rouge);
  box-shadow: 0 24px 44px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   Respiration de la photo dans son cadre

   La photo s'agrandit de 5 % pendant que son cadre reste immobile. Le
   mouvement est lent, six dixiemes de seconde contre trois pour le
   soulevement du cadre : les deux ne partent pas ensemble, et c'est ce
   decalage qui donne l'impression de profondeur plutot que de translation.

   Le cadre doit rogner ce qui depasse, sans quoi la photo agrandie sortirait
   de lui. Tous ces conteneurs le font deja, sauf le trace de circuit.
   -------------------------------------------------------------------------- */
.trace { overflow: hidden; }

.marque__visuel img,
.carte__visuel img,
.galerie__vignette img,
.visuel-encadre img,
.trace img {
  transition: transform .9s ease;
}

.marque:hover .marque__visuel img,
.carte:hover .carte__visuel img,
.galerie__vignette:hover img,
.visuel-encadre:hover img,
.trace:hover img {
  transform: scale(1.09);
}

/* --------------------------------------------------------------------------
   Balayage lumineux

   Un reflet oblique traverse le visuel une fois, au passage de la souris.
   C'est le geste de la lumiere sur une piece d'aluminium poli, d'ou son
   inclinaison, la meme que celle des filets de la charte.

   Le reflet est porte par une couche a part, posee au-dessus de la photo mais
   sous le texte, et n'intercepte aucun clic.
   -------------------------------------------------------------------------- */
.marque__visuel::after,
.carte__visuel::after,
.galerie__vignette::after,
.visuel-encadre::after,
.trace::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 2;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .16) 50%,
    rgba(255, 255, 255, 0) 100%);
}

/* Les conteneurs qui n'etaient pas encore des reperes de positionnement le
   deviennent, sans quoi le reflet se placerait par rapport a la page. */
.carte__visuel,
.visuel-encadre,
.trace { position: relative; }

.marque:hover .marque__visuel::after,
.carte:hover .carte__visuel::after,
.galerie__vignette:hover::after,
.visuel-encadre:hover::after,
.trace:hover::after {
  animation: balayage 1.25s ease-out;
}

@keyframes balayage {
  from { left: -60%; }
  to   { left: 130%; }
}

/* --------------------------------------------------------------------------
   Phrase d'accueil, sous la photo d'en-tete de la page d'accueil

   Trois lignes voulues, donc trois blocs et non des retours forces : une ligne
   trop longue pour l'ecran se replie proprement au lieu de deborder.

   La taille suit la largeur de la fenetre, avec deux butees. La plus haute
   evite qu'un grand ecran ne grossisse le texte au-dela de son conteneur ; la
   plus basse garde la lecture possible sur un telephone, ou la ligne la plus
   longue, soixante-trois signes, tient tout juste.
   -------------------------------------------------------------------------- */
.accroche {
  margin: 0 0 clamp(4px, .7vw, 7px);
  text-align: center;
  font-size: clamp(12px, 1.4vw, 17px);
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--blanc);
}

.accroche__ligne { display: block; }

.accroche__nom {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   Page d'attente des langues non traduites

   Les trois messages sont cote a cote et non empiles : l'allemand et l'anglais
   doivent se voir sans defiler, alors que le bandeau d'accueil occupe deja le
   haut de l'ecran. Ils ne retombent en colonne que sur les ecrans trop etroits
   pour trois, ou defiler devient de toute facon inevitable.
   -------------------------------------------------------------------------- */
.section--attente { padding: clamp(24px, 3.5vw, 40px) 0 clamp(32px, 5vw, 56px); }

.attente {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Quatre rangees partagees : drapeau, titre, texte, bouton. */
  grid-auto-rows: auto;
  gap: clamp(20px, 3vw, 36px);
}

/* Les quatre elements d'un pave s'alignent sur ceux des paves voisins, meme si
   un titre passe sur deux lignes et pas les autres : chaque pave reprend les
   rangees de la grille parente au lieu de definir les siennes. Sans cela, un
   texte plus long dans une langue decalerait tout ce qui le suit. */
.attente__bloc {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  justify-items: start;
  gap: 10px;
}

.attente__drapeau {
  width: 40px;
  height: 26px;
  border-radius: 3px;
}

/* Filet de separation entre deux langues voisines, sur la meme ligne. */
.attente__bloc + .attente__bloc {
  border-left: 1px solid var(--filet);
  padding-left: clamp(20px, 3vw, 36px);
}

@media (max-width: 767px) {
  .attente__bloc + .attente__bloc {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--filet);
    padding-top: clamp(18px, 4vw, 24px);
  }
}

.attente__titre {
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--blanc);
  margin: 0;
}

.attente__texte {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  color: var(--blanc);
  margin: 0;
}

.attente__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 22px;
  background: var(--rouge);
  color: var(--blanc);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  border-bottom: none;
}

.attente__lien:hover,
.attente__lien:focus-visible {
  background: #A32334;
  color: var(--blanc);
  border-bottom: none;
}