/* ==========================================================================
   bondmoments.com — feuille de style unique
   --------------------------------------------------------------------------
   Remplace 34 feuilles et 451 Ko par page (Astra + Elementor + Happy Addons +
   Font Awesome + eicons + Google Fonts). Chaque valeur ici a ete RELEVEE sur le
   site en production, soit dans les styles calcules par Chrome, soit dans les
   reglages `_elementor_data`. Rien n'est invente : la consigne est « meme rendu,
   aucune regression ».

   Reference : maquettes/site-web/bondmoments-specification-de-reconstruction.md
   ========================================================================== */

/* --- 1. Les jetons -------------------------------------------------------
   Attention : ce ne sont PAS les palettes declarees dans le kit Elementor.
   Celles-ci sont restees aux valeurs par defaut (#6EC1E4, #61CE70) et ne sont
   employees nulle part. Les valeurs ci-dessous sont celles que le navigateur
   applique reellement. */
:root{
  --page:        #F3F6F3;   /* rgb(243,246,243) — blanc tres legerement verdi */
  --blanc:       #FFFFFF;
  --alterne:     #F8F8F8;
  --texte:       #4F5655;   /* rgb(79,86,85)  */
  --titre:       #14261C;   /* rgb(20,38,28)  — vert tres sombre */
  --noir:        #000000;   /* le pied de page */
  --magenta:     #EA0A8C;   /* debut du degrade des boutons */
  --bleu:        #2CA0D6;   /* fin du degrade des boutons */
  --navy:        #204287;   /* les sous-titres Poppins — releve sur le rendu,
                               et NON #14261C comme je l'avais suppose */
  --lien-pied:   #4F649D;   /* les liens du pied : un bleu-violet, pas du blanc */
  --voile:       #0000005E; /* par-dessus l'image du heros */
  --constel:     #9ccdd0;

  --serif:       Arial, "Helvetica Neue", Helvetica, sans-serif;
  --corps:       Helvetica, Arial, sans-serif;
  --poppins:     "Poppins", Helvetica, Arial, sans-serif;

  --large:       1200px;    /* MESURE sur le site en ligne, section par
                               section. J'avais mis 1140 — la valeur par defaut
                               d'Elementor — mais le site emploie 1200, et le
                               heros n'a AUCUNE limite (1425 sur une fenetre de
                               1440). C'est ce que Redouane a vu : « l'etalement
                               du texte sur la largeur de l'ecran qui est
                               different ». */
  --entete:      86px;      /* hauteur relevee de l'en-tete */
}

/* --- 2. Poppins, auto-hebergee -------------------------------------------
   Le site d'origine la chargeait depuis fonts.googleapis.com. L'auto-heberger
   evite deux choses : d'ouvrir deux domaines Google dans la politique de
   securite, et de signaler chaque visiteur a Google des le premier octet.
   Sous-ensemble latin uniquement : 7,9 Ko par graisse. */
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:200; font-display:swap;
  src:url("/fonts/poppins-200.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/poppins-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 3. Remise a zero ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--page); color:var(--texte);
  font-family:var(--corps); font-size:16px; line-height:1.857;  /* 29,71 px */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; border:0; display:block;}
a{color:inherit;}
button,input,select,textarea{font:inherit; color:inherit;}

/* --- 4. Typographie ------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif); color:var(--titre); margin:0;
  font-weight:600; text-wrap:balance;
}
h1{font-size:44px; line-height:1.4; color:var(--blanc);}       /* 61,6 px */
h3{font-size:36px; line-height:1.3;}                            /* 46,8 px */
h3.grand{font-size:42px; line-height:1.3; text-transform:capitalize;}
h3.petit,h5{font-size:22px; line-height:1.3; font-weight:400;}
h6{font-size:16px; font-weight:600;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

/* Le sous-titre en Poppins 200 : present sous presque chaque titre de section
   (« Where should we go now? », « Who is around? », « Discover the Story
   Behind »...). C'est la seule police chargee du site. */
.sous-titre{
  font-family:var(--poppins); font-weight:200; font-size:32px;
  line-height:1.3; color:var(--navy); margin:0 0 .6em;
  text-transform:capitalize;   /* releve sur le rendu : « Where Should We Go
                                  Now? » et non « Where should we go now? » */
}
.sous-titre.petit{font-size:24px;}
.intro{font-size:18px;}

/* --- 5. Trame ------------------------------------------------------------- */
/* MESURE : les sections du site d'origine n'ont PAS de remplissage vertical.
   Leur hauteur (765 px pour la plupart) vient d'une hauteur minimale, pas d'un
   `padding`. J'avais mis 80 px partout, ce qui decalait tout le rythme vertical
   de la page. */
.bloc{padding:0 20px; min-height:765px; display:flex; align-items:center;}
.bloc > .dedans{width:100%;}
.bloc.libre{min-height:0; padding:40px 20px;}
.bloc.blanc{background:var(--blanc);}
.bloc.alterne{background:var(--alterne);}
.dedans{max-width:var(--large); margin:0 auto;}
/* Les proportions viennent des donnees, par `--g1` et `--g2` posees en style
   en ligne. On les LIT ici plutot que de laisser le style en ligne declarer
   `grid-template-columns` : sinon aucune requete media ne pourrait repasser la
   grille en une seule colonne sur telephone. */
.duo{display:grid; grid-template-columns:calc(var(--g1,1)*1fr) calc(var(--g2,1)*1fr);
  gap:40px; align-items:center;}
.duo.image-a-gauche{grid-template-columns:46fr 54fr;}
.duo.image-a-droite{grid-template-columns:53fr 47fr;}
.centre{text-align:center;}

/* --- 6. L'en-tete --------------------------------------------------------
   Releve : hauteur 86 px, fond TRANSPARENT, `position:absolute`. Il se
   superpose au heros, dont le voile sombre assure la lisibilite du menu.
   Ce n'est donc pas un bandeau fige : il defile avec la page. */
/* L'EN-TETE N'EST ABSOLU QU'AU-DESSUS D'UN HEROS.
   LE DEFAUT QUE CECI CORRIGE, vu au banc mobile : sur les 19 pages sans heros
   (juridiques et communiques), un en-tete `position:absolute` laisse le contenu
   passer DESSOUS — le logo chevauchait « Our Commitment to You » sur la Privacy
   Policy. Au-dessus du heros, en revanche, la superposition est voulue : c'est
   le voile sombre qui assure la lisibilite du menu.
   La classe `sur-image` est posee par le generateur quand la premiere section
   est un heros. */
.entete{
  position:relative; z-index:50;
  height:var(--entete); display:flex; align-items:center;
  padding:0 20px; background:var(--titre);
}
.entete.sur-image{position:absolute; top:0; left:0; right:0;
  background:transparent;}
.entete .dedans{display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:24px;}
.logo img{height:54px; width:auto;}
.menu{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.menu a{
  color:var(--blanc); text-decoration:none; font-size:16px; line-height:20px;
  transition:opacity .3s ease;   /* 0,3 s : la duree dominante du site */
}
.menu a:hover,.menu a:focus-visible{opacity:.7;}
.bascule{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.bascule span{display:block; width:24px; height:2px; background:var(--blanc);
  margin:5px 0; transition:transform .3s ease, opacity .3s ease;}

/* --- 7. Le heros ---------------------------------------------------------
   Image de fond + voile #0000005E. La toile de la constellation s'insere en
   PREMIER ENFANT (voir site.js) : ajoutee en dernier, elle peindrait par-dessus
   le voile, le logo et le menu. */
.heros{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  /* MESURE sur le site en ligne : 200 px en haut, 0 en bas. J'avais calcule
     « hauteur d'en-tete + 40 » en haut et 80 en bas, ce qui decalait tout le
     heros. L'en-tete fait 86 px et se superpose : les 200 px l'incluent. */
  padding:200px 20px 0;
}
.heros::after{
  content:""; position:absolute; inset:0; background:var(--voile); z-index:2;
}
.heros > .dedans{position:relative; z-index:3; width:100%;}
/* PAS de `max-width` ici. Sur le site d'origine le heros est une colonne de
   62 % DANS la section ; en reconstruisant avec une grille `.duo`, la colonne
   contraint deja la largeur. Remettre 62 % par-dessus revenait a appliquer la
   contrainte DEUX FOIS : le titre tombait a 361 px dans une colonne de 583 et
   s'enroulait sur CINQ lignes au lieu de deux, malgre son `<br>`. */
.heros h1,.heros p{color:var(--blanc);}
.heros h1{color:var(--blanc);}
/* Le heros sans colonne d'image (pages Professionals, Media, Brand Ambassador,
   Partnership) occupe toute la largeur : la on borne le texte pour qu'il ne
   s'etire pas sur 1140 px, ce qui serait illisible. */
.heros .dedans > h1,
.heros .dedans > div:not(.duo) h1{max-width:62%;}
.heros .dedans > div:not(.duo) p{max-width:62%;}
#bond-constellation{position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:1; pointer-events:none;}
#bond-constellation canvas{width:100%!important; height:100%!important;}

/* --- 8. Les boutons ------------------------------------------------------- */
/* MESURE sur le site en ligne. J'avais tout faux : Arial 16 en aplat magenta,
   rayon 3 px, remplissage 14/30. Le vrai bouton est une PILULE en DEGRADE :
     Poppins 14/600 blanc
     linear-gradient(90deg, #EA0A8C, #2CA0D6)
     rayon 24 px, remplissage 12px 22px  ->  189 x 38 px pour « Get The App For Free »
   C'est l'ecart que Redouane a vu en premier : « la taille des boutons, la
   couleur, les degrades de couleur ». */
.bouton{
  display:inline-block; color:var(--blanc); text-decoration:none;
  padding:12px 22px; border-radius:24px;
  background:linear-gradient(90deg,var(--magenta) 0%,var(--bleu) 100%);
  font-family:var(--poppins); font-size:14px; font-weight:600; line-height:1;
  border:0; cursor:pointer; text-align:center;
  transition:filter .3s ease, transform .3s ease;
}
.bouton:hover,.bouton:focus-visible{filter:brightness(1.1); transform:scale(1.03);}
/* Les boutons « Subscribe » et « Submit » des formulaires sont TRANSPARENTS sur
   le site d'origine, avec le texte sombre pour « Submit ». */
.bouton.contour{
  background:transparent; color:var(--blanc);
  border:1px solid rgba(255,255,255,.7);
}
.bouton.contour:hover{background:rgba(255,255,255,.12); filter:none;}
.formulaire .bouton{
  background:transparent; color:var(--titre);
  border:1px solid rgba(20,38,28,.35);
}
.formulaire .bouton:hover{background:rgba(20,38,28,.06); filter:none;}
.bloc.sombre .formulaire .bouton{
  color:var(--blanc); border-color:rgba(255,255,255,.7);
}

/* --- 9. Les cartes retournables (flip-box) -------------------------------
   LE POINT QUE J'AVAIS MANQUE, et que Redouane a signale : « les cercles de
   Bond Ambassadors, tu as du texte qui change ». 32 au total sur le site.
   Valeurs relevees dans `_elementor_data` :
     hauteur 220 px ; rayon 200 px (grands) ou 50 px (etapes)
     recto  : degrade #EA0A8C -> #2CA0D6 a 270deg, Arial 24 px blanc
     verso  : degrade INVERSE, Arial 15 px blanc
     effet  : `fade` — un FONDU CROISE, pas une rotation
     contact: --e-transform-scale 1.1
   Le declenchement est au survol ET au clic/tape : sur un ecran tactile il n'y
   a pas de survol, et sans le clic la face arriere serait inatteignable. */
.cartes{display:grid; gap:30px; grid-template-columns:repeat(3,1fr);}
.cartes.etapes{grid-template-columns:repeat(4,1fr);}
.carte{
  position:relative; height:220px; border-radius:200px; overflow:hidden;
  cursor:pointer; transition:transform .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.cartes.etapes .carte{border-radius:50px;}
.carte:hover,.carte:focus-visible,.carte.ouverte{transform:scale(1.1); z-index:2;}
.carte:focus-visible{outline:3px solid var(--blanc); outline-offset:3px;}
.carte .face{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; text-align:center; color:var(--blanc);
  font-family:var(--serif); transition:opacity .3s ease;
}
.carte .recto{
  background:linear-gradient(270deg,var(--magenta) 0%,var(--bleu) 100%);
  font-size:24px; line-height:1.3; padding:0 0 30px; opacity:1;
}
.carte .verso{
  background:linear-gradient(270deg,var(--bleu) 0%,var(--magenta) 100%);
  font-size:15px; line-height:1.5; padding:20px 20px 0; opacity:0;
}
.cartes.etapes .carte .recto,
.cartes.etapes .carte .verso{font-size:18px; padding:20px 10px 0;}
.carte:hover .recto,.carte:focus-visible .recto,.carte.ouverte .recto{opacity:0;}
.carte:hover .verso,.carte:focus-visible .verso,.carte.ouverte .verso{opacity:1;}

/* --- 10. Les tuiles a icone (image-box) ----------------------------------- */
.tuile{display:flex; align-items:center; gap:16px; margin:0 0 50px;}
.tuile.a-droite{flex-direction:row-reverse; text-align:right;}
.tuile img{width:60px; flex:0 0 auto;}
.tuile h5{margin:0;}

/* --- 11. Le pied de page -------------------------------------------------
   Gabarit Elementor 1202 : fond noir, remplissage 20 px, quatre colonnes
   de 25 % — logo + copyright, « company », « LEGAL », « Social ». */
/* MESURE sur le site en ligne : hauteur 300 px, fond noir, remplissage 20 px
   haut et bas et AUCUN sur les cotes, quatre colonnes de 295 px dans un
   conteneur de 1200. Les titres sont en POPPINS 14/600 majuscules (et non Arial
   16), et les liens en Helvetica 16 d'un bleu-violet `#4F649D` — pas en blanc.
   C'est ce que Redouane a vu : « les footers qui ne sont pas du tout presentes
   de la meme maniere ». */
.pied{background:var(--noir); color:var(--blanc); padding:20px 0; font-size:16px;
  min-height:300px; display:flex; align-items:center;}
.pied .dedans{display:grid; grid-template-columns:repeat(4,295px);
  justify-content:center; gap:0; width:100%;}
.pied h6{color:var(--blanc); margin:0 0 10px; text-transform:uppercase;
  font-family:var(--poppins); font-size:14px; font-weight:600;
  letter-spacing:.02em;}
.pied ul{list-style:none; margin:0; padding:0;}
.pied li{padding:3px 0; line-height:1.4;}
.pied a{color:var(--lien-pied); text-decoration:none; font-family:var(--corps);
  font-size:16px; transition:color .3s ease;}
.pied a:hover,.pied a:focus-visible{color:var(--blanc);}
.pied .groupe{font-weight:700; opacity:1; display:block; padding-top:8px;}
.pied .logo-pied{width:50%; margin:0 0 12px;}
.pied .reseaux{display:flex; gap:12px; margin:6px 0 0; padding:0; list-style:none;}
/* MESURE sur le site en ligne : 50x50, fond TRANSPARENT, icone de 25 px en
   rgb(105,114,125), rayon 10 %. J'avais fait des pastilles de 28 px sur fond
   clair — rien a voir. */
.pied .reseaux{gap:4px; flex-wrap:wrap;}
.pied .reseaux a{display:inline-flex; width:50px; height:50px;
  align-items:center; justify-content:center; border-radius:10%;
  background:transparent; color:rgb(105,114,125); transition:color .3s ease;}
.pied .reseaux a:hover{color:var(--blanc);}
.pied .reseaux svg{width:25px; height:25px; fill:currentColor;}

/* --- 12. Le formulaire ---------------------------------------------------- */
.formulaire{display:grid; gap:14px; max-width:620px;}
.formulaire label{display:block; font-size:14px; margin:0 0 4px;}
.formulaire input,.formulaire textarea{
  width:100%; padding:12px 14px; border:1px solid #d7dcd9; border-radius:3px;
  background:var(--blanc); transition:border-color .3s ease, box-shadow .3s ease;
}
.formulaire input:focus,.formulaire textarea:focus{
  outline:0; border-color:var(--bleu); box-shadow:0 0 0 3px rgba(44,160,214,.18);
}
.formulaire textarea{min-height:130px; resize:vertical;}
.formulaire .message{font-size:15px; padding:10px 0; min-height:1.5em;}
.formulaire .message.ok{color:#15803d;}
.formulaire .message.ko{color:#b91c1c;}

/* --- 13. L'apparition au defilement --------------------------------------
   Elementor ajoute `animated fadeIn` par JavaScript. On reproduit avec un
   IntersectionObserver (voir site.js) : l'element part a 0 et se revele. */
.apparait{opacity:0;}
.apparait.vu{animation:apparition .9s ease forwards;}
@keyframes apparition{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .apparait,.apparait.vu{opacity:1; animation:none;}
  *{transition-duration:.01ms!important; animation-duration:.01ms!important;}
}

/* --- 14. Vue etroite -----------------------------------------------------
   Les points de rupture d'Elementor releves dans le kit : viewport_lg 1025,
   viewport_md 768. On s'y tient pour que les bascules se produisent aux memes
   largeurs que sur le site d'origine. */
@media (max-width:1024px){
  .cartes{grid-template-columns:repeat(2,1fr);}
  .cartes.etapes{grid-template-columns:repeat(2,1fr);}
  .pied .dedans{grid-template-columns:repeat(2,1fr);}
  .heros h1,.heros p{max-width:100%;}
}
@media (max-width:767px){
  h1{font-size:32px;}
  h3{font-size:28px;}
  h3.grand{font-size:30px;}
  .sous-titre{font-size:26px;}
  h3.petit,h5{font-size:20px;}
  .bloc{padding:60px 20px;}
  .duo,.duo.image-a-gauche,.duo.image-a-droite{grid-template-columns:1fr!important;}
  .cartes,.cartes.etapes{grid-template-columns:1fr;}
  .pied .dedans{grid-template-columns:1fr;}
  .tuile,.tuile.a-droite{flex-direction:column; text-align:center;}
  .tuile img{width:20%;}
  .menu{
    display:none; position:absolute; top:var(--entete); left:0; right:0;
    flex-direction:column; gap:0; background:rgba(0,0,0,.92); padding:10px 20px;
  }
  .menu.ouvert{display:flex;}
  .menu li{padding:10px 0;}
  .bascule{display:block;}
}

/* --- 15. La grille d'icones de « What's in it? » -------------------------
   Trois colonnes : trois tuiles alignees a droite, la maquette au centre,
   trois tuiles alignees a gauche. Sur le site d'origine cette grille porte
   `elementor-hidden-mobile` : en vue etroite ce sont les tuiles de la section
   « Tell me more » qui presentent les memes six fonctionnalites. On respecte
   ce choix plutot que de l'ameliorer — la consigne est « aucune regression »,
   pas « fais mieux ». */
.grille-icones{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px;
  align-items:center; margin-top:50px; text-align:left;
}
.colonne-centre img{width:70%; margin:0 auto;}
.sans-mobile{display:block;}

/* --- 16. Les six tuiles de fonctionnalite -------------------------------- */
.fonctions{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  margin:46px 0; text-align:center;
}
.fonction img{width:68px; margin:0 auto 14px;}
.fonction h5{margin:0 0 8px;}
.fonction p{font-size:15px; line-height:1.6;}
.vue-large{width:45%; margin:0 auto;}

/* --- 17. Le carrousel des ecrans de l'application -----------------------
   Defilement horizontal natif avec accrochage, plutot qu'un diaporama en
   JavaScript : c'est le navigateur qui gere l'inertie, le clavier, le
   toucher et la molette. Aucune bibliotheque, et le contenu reste lisible
   meme si le script ne s'execute pas. */
.carrousel{
  overflow-x:auto; overflow-y:hidden; margin-top:40px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* La barre de defilement est MASQUEE : le site d'origine (Swiper) n'en montre
     pas, et le carrousel a desormais ses fleches et ses puces. Le defilement
     natif reste actif — on cache l'indicateur, pas la fonction. */
  scrollbar-width:none; -ms-overflow-style:none;
}
.carrousel::-webkit-scrollbar{display:none;}
.carrousel:focus-visible{outline:3px solid var(--bleu); outline-offset:4px;}
.carrousel .piste{
  display:flex; gap:24px; list-style:none; margin:0; padding:0 0 14px;
}
.carrousel .piste li{flex:0 0 auto; scroll-snap-align:center;}
.carrousel .piste img{width:230px; height:auto; border-radius:14px;}

/* --- 18. Les temoignages -------------------------------------------------- */
.avis{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  margin-top:46px; text-align:center;}
.avis figure{margin:0; display:flex; flex-direction:column; align-items:center;}
.avis blockquote{margin:0 0 18px; font-size:15px; line-height:1.75;
  font-style:italic;}
.avis img{width:94px; height:95px; border-radius:50%; margin:0 0 10px;}
.avis figcaption{display:flex; flex-direction:column; gap:2px;}
.avis .nom{font-family:var(--serif); font-weight:600; color:var(--titre);}
.avis .role{font-size:14px;}

/* --- 19. La section sombre sur image (« App Available Soon ») ------------ */
.bloc.sombre{
  position:relative; background-position:center; background-size:cover;
  color:var(--blanc);
}
.bloc.sombre::before{content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.55);}
.bloc.sombre > .dedans{position:relative; z-index:2;}
.bloc.sombre h3{color:var(--blanc);}
.icone-telechargement{width:30%; max-width:340px; margin:26px auto;}
.ligne-courriel{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.ligne-courriel input{max-width:320px;}
.centre-formulaire{margin:0 auto; justify-items:center;}

/* --- 20. Le piege a robots -----------------------------------------------
   Un champ que seuls les robots remplissent. Il est retire du flux ET de
   l'ordre de tabulation : un lecteur d'ecran ne l'annonce pas, un humain ne
   peut pas le remplir par accident. `display:none` suffirait a le cacher mais
   certains robots l'ignorent justement parce qu'il est trop visible dans le
   balisage — un decalage hors cadre est plus discret. */
.pot-de-miel{position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden;}
.visuellement-cache{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ancre-alias{display:block; height:0; overflow:hidden;}

/* --- 21. Les pages de documents (juridique et communiques) --------------
   Une colonne de lecture : la mesure confortable est d'environ 70 caracteres.
   Les tableaux debordent dans leur propre conteneur, jamais la page. */
.document{max-width:74ch; margin:0 auto;}
.document h4{font-size:36px; line-height:1.3; margin:0 0 .6em;}
.document h5{font-size:22px; margin:1.6em 0 .5em;}
.document p,.document li{font-size:16px;}
.document ol,.document ul{padding-left:1.4em; margin:0 0 1em;}
.document li{margin:0 0 .35em;}
.document a{color:var(--bleu); text-decoration:underline;
  text-underline-offset:2px;}
.document a:hover{color:var(--magenta);}
.document table{width:100%; border-collapse:collapse; margin:1.2em 0;
  font-size:15px; display:block; overflow-x:auto;}
.document th,.document td{border:1px solid #d7dcd9; padding:9px 11px;
  text-align:left; vertical-align:top;}
.document th{background:var(--alterne); font-family:var(--serif);}
.document .date{font-size:14px; opacity:.8; margin:-0.4em 0 1.6em;}

/* --- 22. Vue etroite : les ajouts des sections ci-dessus ------------------ */
@media (max-width:1024px){
  .fonctions{grid-template-columns:repeat(2,1fr);}
  .avis{grid-template-columns:1fr; max-width:620px; margin-inline:auto;}
}
@media (max-width:767px){
  /* la grille d'icones est masquee sur mobile sur le site d'origine */
  .grille-icones{display:none;}
  .sans-mobile{display:none;}
  .fonctions{grid-template-columns:1fr;}
  .vue-large,.icone-telechargement{width:60%;}
  .carrousel .piste img{width:200px;}
  .ligne-courriel{flex-direction:column; align-items:stretch;}
  .ligne-courriel input{max-width:none;}
  .document h4{font-size:28px;}
}

/* --- 23. Le formulaire de contact : les motifs ---------------------------
   « Reason For Contacting us » est un groupe de cases a cocher OBLIGATOIRE sur
   le site d'origine (wpforms n°14). C'est lui qui oriente une demande vers la
   presse, le recrutement ou un programme partenaire : le perdre transformerait
   le formulaire en simple boite a messages. */
.formulaire fieldset.motifs{
  border:1px solid #d7dcd9; border-radius:3px; padding:14px 16px; margin:0;
  display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--blanc);
}
.formulaire fieldset.motifs legend{
  padding:0 6px; font-size:14px; font-family:var(--serif);
}
.formulaire .case{
  display:flex; align-items:flex-start; gap:8px; font-size:15px; margin:0;
  cursor:pointer;
}
.formulaire .case input{width:auto; margin:4px 0 0; flex:0 0 auto;}
.formulaire .obligatoire{color:var(--magenta);}
@media (max-width:767px){
  .formulaire fieldset.motifs{grid-template-columns:1fr;}
}

/* --- 24. Le tableau de donnees et l'accordeon de la Privacy Policy -------
   Le meme contenu, rendu en TABLEAU en vue large et en ACCORDEON en vue
   etroite — c'est le choix responsive du site d'origine, et il est juste :
   un tableau de cinq colonnes est illisible sur un telephone. */
.tableau-donnees{overflow-x:auto; margin:1.4em 0;}
.tableau-donnees table{width:100%; border-collapse:collapse; font-size:14px;}
.tableau-donnees th,.tableau-donnees td{
  border:1px solid #d7dcd9; padding:9px 11px; text-align:left; vertical-align:top;
}
.tableau-donnees th{
  background:#204287; color:var(--blanc); font-family:var(--serif);
  font-weight:600;
}
.accordeon details{border-bottom:1px solid #d7dcd9;}
.accordeon summary{
  background:#E8E6E6; padding:12px 14px; cursor:pointer; font-size:16px;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.accordeon summary::-webkit-details-marker{display:none;}
.accordeon summary::after{content:"+"; font-size:20px; line-height:1;}
.accordeon details[open] summary::after{content:"\2212";}
.accordeon .corps{padding:12px 14px; font-size:15px;}

/* --- 25. La bande a video de fond ---------------------------------------
   Section 4 de la page d'accueil : aucun widget, rien qu'une video YouTube en
   fond, pleine hauteur de fenetre. Je l'avais PERDUE, parce que je ne
   traduisais que les widgets — une video de fond vit dans les reglages de la
   SECTION, et la mienne paraissait vide.

   Le cadre est sorti du flux et couvre la section : une video 16/9 dans un
   conteneur plus haut que large doit deborder en largeur, sinon des bandes
   noires apparaissent. D'ou la mise a l'echelle par `min-width`/`min-height` a
   177,78 % (16/9) et le centrage par translation. */
.bande-video{position:relative; overflow:hidden; padding:0;}
.bande-video.pleine-hauteur{min-height:100vh;}
.fond-video{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.fond-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw;              /* 16/9 */
  min-width:177.78vh; min-height:100vh;     /* couvre aussi les cadres hauts */
  border:0;
}
.bande-video > .dedans{position:relative; z-index:2;}

/* --- 26. Le carrousel : les commandes --------------------------------------
   MESURE du site d'origine : 15 vignettes visibles (5 images x 3 boucles),
   240 px de large, defilement automatique d'une vignette toutes les 5 s, deux
   fleches et cinq puces. Ma premiere version n'avait rien de tout cela — c'est
   l'ecart que Redouane a nomme : « le carrousel qui n'est pas presente de la
   meme maniere ».

   Les commandes sont ajoutees PAR LE SCRIPT : sans lui, la bande reste
   consultable au doigt et aucune fleche morte ne s'affiche. */
.carrousel-cadre{position:relative;}
.carrousel .piste img{width:240px;}        /* la mesure du site d'origine */
.carrousel-cadre .fleche{
  position:absolute; top:calc(50% - 32px); width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer; color:var(--titre);
  background:rgba(255,255,255,.88); box-shadow:0 2px 12px rgba(20,38,28,.18);
  transition:background-color .3s ease, transform .3s ease, color .3s ease;
}
.carrousel-cadre .fleche:hover,.carrousel-cadre .fleche:focus-visible{
  background:var(--magenta); color:var(--blanc); transform:scale(1.08);
}
.carrousel-cadre .fleche svg{width:22px; height:22px;}
.carrousel-cadre .prec{left:-6px;}
.carrousel-cadre .suiv{right:-6px;}
.carrousel-cadre .puces{
  display:flex; justify-content:center; gap:9px; list-style:none;
  margin:18px 0 0; padding:0;
}
.carrousel-cadre .puces button{
  width:10px; height:10px; padding:0; border:0; border-radius:50%;
  background:rgba(20,38,28,.22); cursor:pointer;
  transition:background-color .3s ease, transform .3s ease;
}
.carrousel-cadre .puces button:hover{background:rgba(20,38,28,.45);}
.carrousel-cadre .puces button[aria-current="true"]{
  background:var(--magenta); transform:scale(1.25);
}
@media (max-width:767px){
  .carrousel-cadre .prec,.carrousel-cadre .suiv{display:none;}
  .carrousel .piste img{width:200px;}
}

/* --- 27. La visibilite par format -----------------------------------------
   Le generateur emet `sans-bureau`, `sans-tablette` et `sans-mobile` d'apres les
   reglages d'Elementor, et depuis la correction du 20/10 il les HERITE aussi des
   conteneurs. Les points de rupture suivent ceux du kit : 1025 et 768. */
@media (min-width:1025px){ .sans-bureau{display:none!important;} }
@media (min-width:768px) and (max-width:1024px){ .sans-tablette{display:none!important;} }
@media (max-width:767px){ .sans-mobile{display:none!important;} }