/* ==========================================================================
   Africassur — feuille de style unique
   1. Variables   2. Reset / base   3. Typographie   4. Mise en page
   5. Composants  6. Sections       7. Responsive     8. Animations
   Point de rupture unique : 800px (mobile / tablette en dessous).
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {
  /* Couleurs */
  --color-navy: #001a65;          /* bleu de la marque : titres, boutons, bandeaux */
  --color-ink: #15164b;           /* texte foncé */
  --color-deep: #011948;          /* fond des cartes de certification */
  --color-ocean: #0d3a64;         /* fond du pied de page */
  --color-hero: #0f2f4a;          /* fond du hero de l'accueil */
  --color-steel: #014d82;         /* bordure des boutons contour */
  --color-yellow: #ffec00;        /* accent principal */
  --color-yellow-soft: #f8e71c;   /* pastilles et bordures jaunes */
  --color-yellow-bright: #fffc00;
  --color-hover: #e7d919;         /* survol du menu */
  --color-white: #fff;
  --color-black: #000;
  --color-bg: #f4f4f4;            /* fond des sections claires */
  --color-card: #e9e8e8;          /* fond des cartes de l'accueil */
  --color-faq-light: #f1f4f8;
  --color-field-border: #b0baca;
  --color-text-muted: #0a0c1d;

  /* Typographie */
  --font-main: "Poppins", sans-serif;
  --font-alt: "Roboto", sans-serif;
  --font-icon: "Font Awesome 7";
  --font-brands: "Font Awesome 7 Brands";

  /* Ombres */
  --shadow: 0 1px 5px rgba(0, 0, 0, .4);
  --shadow-soft: 0 1px 5px rgba(0, 0, 0, .2);
  --shadow-strong: 0 1px 5px rgba(0, 0, 0, .7);
  --shadow-glow: 0 0 25px rgba(0, 0, 0, .4), 0 0 15px rgba(255, 255, 255, .2), 0 0 3px rgba(255, 255, 255, .4);

  /* Mise en page */
  --container: 1120px;
  --section-padding: 40px;
  --radius-sm: 3px;
  --radius: 10px;
  --radius-lg: 15px;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins/regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins/500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins/600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins/700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("../fonts/poppins/800.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 300; font-display: swap; src: url("../fonts/roboto/300.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 300; font-style: italic; font-display: swap; src: url("../fonts/roboto/300italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("../fonts/roboto/700.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 7"; font-weight: 900; font-display: block; src: url("../fonts/fontawesome/fa-solid-900.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 7"; font-weight: 400; font-display: block; src: url("../fonts/fontawesome/fa-regular-400.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 7 Brands"; font-weight: 400; font-display: block; src: url("../fonts/fontawesome/fa-brands-400.woff2") format("woff2"); }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   3. TYPOGRAPHIE
   ========================================================================== */

/* Titres de section : Poppins 800, bleu marque */
.heading {
  font-weight: 800;
  color: var(--color-navy);
  word-break: break-word;
}

.heading--light { color: var(--color-white); }
.heading--xl { font-size: 49px; line-height: 57px; }
.heading--lg { font-size: 38px; line-height: 50px; }
.heading--md { font-size: 32px; line-height: 38.4px; }

.accent { color: var(--color-yellow); }
.accent-soft { color: var(--color-yellow-soft); }

.text {
  word-break: break-word;
}

.text--lead { font-size: 20px; line-height: 26px; }
.text--lg { font-size: 18px; line-height: 23px; }
.text--md { font-size: 16px; line-height: 21px; }
.text--sm { font-size: 15px; line-height: 20px; }
.text--center { text-align: center; }
.text--light { color: var(--color-white); }
.text--ink { color: var(--color-ink); }


/* ==========================================================================
   4. MISE EN PAGE
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.section {
  position: relative;
  padding: var(--section-padding);
  background-color: var(--color-bg);
}

.section--white { background-color: var(--color-white); }
.section--transparent { background-color: transparent; }

.section--cover {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Visibilité selon l'écran : contenus que le site d'origine affichait
   différemment sur ordinateur et sur mobile. */
.u-mobile-only { display: none !important; }


/* ==========================================================================
   5. COMPOSANTS
   ========================================================================== */

/* ---------- Icônes (Font Awesome 7, seulement celles utilisées) ---------- */
.icon::before {
  content: var(--icon);
  display: inline-block;
  font-family: var(--font-icon);
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.icon--regular::before { font-weight: 400; }
.icon--brand::before { font-family: var(--font-brands); font-weight: 400; }

.icon--angles-right       { --icon: "\f101"; }
.icon--circle-plus        { --icon: "\f055"; }
.icon--circle-arrow-right { --icon: "\f0a9"; }
.icon--circle-right       { --icon: "\f35a"; }
.icon--circle-chevron-up  { --icon: "\f139"; }
.icon--check              { --icon: "\f00c"; }
.icon--address-book       { --icon: "\f2b9"; }
.icon--envelopes-bulk     { --icon: "\f674"; }
.icon--address-card       { --icon: "\f2bb"; }
.icon--badge-percent      { --icon: "\f646"; }
.icon--500px              { --icon: "\f26e"; }

/* ---------- Boutons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-family: var(--font-main);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color .3s, background .3s, transform .3s;
}

/* reflet lumineux qui traverse tous les boutons */
.btn::after {
  content: "";
  position: absolute;
  inset: -50% -60%;
  background: linear-gradient(50deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translate(-80%, 0);
  animation: glimmer 5s ease infinite;
  pointer-events: none;
}

.btn .icon {
  margin-left: 5px;
  padding-left: 4px;
  font-size: inherit;
  line-height: 1;
}

.btn--primary {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn--light {
  background: var(--color-white);
  color: var(--color-ink);
}

.btn--yellow {
  background: var(--color-yellow);
  color: var(--color-navy);
}

.btn--rounded { border-radius: var(--radius); }

.btn:hover { transform: translateY(-1px); }

/* ---------- Réseaux sociaux ---------- */
.social {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
}

.social__link {
  display: block;
}

.social--topbar {
  width: 265px;
  justify-items: end;
}

.social--topbar .social__icon {
  width: 30px;
  height: 30px;
}

.social--topbar .social__item:nth-child(3) .social__icon {
  width: 31px;
  height: 31px;
}

.social--footer {
  width: 100%;
}

/* rangée d'icônes propre au mobile, sous les coordonnées */
.social--mobile { display: none; }

.social--footer .social__icon {
  width: 35px;
  height: 35px;
}

/* ---------- Bandeau supérieur ---------- */
.topbar {
  padding: 9px 0 1px;
  background: var(--color-navy);
  color: var(--color-white);
}

.topbar__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  align-items: start;
  min-height: 45px;
}

.topbar .social { justify-self: end; }

.topbar__tagline {
  margin: 13px 0 10px 10px;
  font-family: var(--font-alt);
  font-size: 17px;
  font-weight: 300;
  line-height: 22px;
}

.topbar__tagline strong { font-weight: 700; }

/* ---------- En-tête et navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 44px 40px 16px;
  background: var(--color-bg);
}

/* grille de 12 colonnes : logo sur 2, menu sur 10 */
.site-header__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
  align-items: start;
  height: 70px;
  padding: 0 10px;
}

.site-header__logo { grid-column: 1 / 3; }
.nav { grid-column: 3 / 13; }

.site-header__logo img {
  width: 60px;
  height: 60px;
}

.nav {
  margin-top: 10px;
}

.nav__list {
  display: flex;
  justify-content: flex-end;
}

/* séparateurs souples : 32px maximum, ils rétrécissent quand la place manque */
.nav__item { display: contents; }

.nav__item:not(:last-child)::after {
  content: "";
  flex: 0 1 32px;
  min-width: 0;
}

.nav__link {
  display: block;
  min-height: 30px;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  color: var(--color-ink);
  transition: box-shadow .1s ease-in-out;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-hover);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}

.nav__toggle,
.nav__backdrop {
  display: none;
}

/* ---------- Pied de page ---------- */
.site-footer {
  color: var(--color-white);
}

.footer-main {
  padding: var(--section-padding);
  background: var(--color-ocean) url("../images/June2022Start7PM.webp") 50% 50% / cover no-repeat;
}

/* grille de 12 colonnes : présentation, liens et coordonnées sur 4 colonnes chacun */
.footer-main__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  min-height: 474px;
  overflow-wrap: break-word;
  padding: 60px 10px 0;
}

.footer-main__brand { padding: 0 10px; }
.footer-main__links { padding-left: 62px; }
.footer-main__contact { padding-left: 52px; }

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.footer-brand__logo {
  flex: none;
  width: 29.4%;
  height: auto;
}

.footer-brand__name {
  margin-top: 33px;
  word-break: break-word;
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
}

.footer-main__text {
  margin: 20px 0 42px;
  font-size: 15px;
  line-height: 24px;
}

.footer-title {
  width: clamp(100px, 45%, var(--title-width, 126px));
  font-size: 18px;
  font-weight: 700;
  line-height: 42px;
}

.footer-title::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 8px;
  border: 2px solid var(--color-yellow);
}

.footer-title--links { margin-top: 10px; }
.footer-title--contact { --title-width: 136px; }

.footer-links {
  margin-top: 43px;
  padding: 0 5px 0 1px;
  font-size: 15px;
  line-height: 34px;
}

.footer-links__link {
  display: flex;
  align-items: flex-start;
}

/* l'icône prend la hauteur de ligne du texte : centrée sur la première ligne */
.footer-links__link::before {
  line-height: inherit;
  width: 25px;
  margin-right: 10px;
  color: var(--color-yellow);
  font-size: 20px;
}

.footer-links__link:hover { text-decoration: underline; }

.footer-contact {
  margin-top: 56px;
  font-style: normal;
}

.footer-contact__item {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  column-gap: 10.3%;
  padding-left: 2px;
  font-size: 15px;
  line-height: 24px;
}

.footer-contact__item img {
  width: 35px;
  height: 35px;
}

.footer-contact__item span {
  display: block;
  margin: 3px 0 34px;
}

.footer-contact__item a[href^="tel:"] { white-space: nowrap; }

.footer-legal {
  padding: 30px 0 80px;
  background: var(--color-navy);
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
}

.footer-legal__inner {
  display: grid;
  grid-template-columns: minmax(0, 530fr) minmax(0, 245fr) minmax(0, 245fr);
  column-gap: 40px;
  padding: 13px 10px 0;
}

.footer-legal strong { font-weight: 700; }


/* ---------- Bandeau de titre des pages intérieures ---------- */
.page-hero {
  height: 380px;
  padding: 199px var(--section-padding) 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-hero__title {
  font-size: 49px;
  line-height: 38.4px;
  text-align: center;
}

.page-hero--services { background-image: url("../images/Designsanstitre67.webp"); }
.page-hero--certifications,
.page-hero--contact { background-image: url("../images/Designsanstitre66.webp"); }

/* ---------- Cadre d'image (bordure bleue + halo) ---------- */
.frame {
  padding: 10px;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glow);
}

.frame img {
  width: 100%;
}

/* ---------- Pastille jaune (titres « QUE POUVONS NOUS FAIRE… ») ---------- */
.pill {
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-lg);
  background: var(--color-yellow-soft);
  color: var(--color-ink);
  text-align: center;
}

/* ---------- Formulaires ---------- */
.form__field {
  display: block;
  width: 100%;
  padding: 12px 10px;
  border: 1px solid var(--color-field-border);
  border-radius: 5px;
  background: var(--color-white);
  font-size: 18px;
  line-height: 23px;
}

/* zone de texte multiligne (message) : hauteur réglable par le visiteur */
.form__field--textarea {
  min-height: 130px;
  resize: vertical;
}

.form__field::placeholder { color: rgba(0, 0, 0, .55); }
.form__field:focus { outline: 2px solid var(--color-navy); outline-offset: -1px; }
.form__field.is-invalid { outline: 2px solid #c62828; }

/* case reCAPTCHA v2 : hauteur réservée pour éviter un saut de mise en page */
.form__captcha {
  grid-column: 1 / -1;
  min-height: 78px;
}

.form__captcha-notice {
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: #5a5e78;
}

.form__captcha-notice a { text-decoration: underline; }

/* piège à robots : champ invisible pour les visiteurs */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form__status {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* champ téléphone : drapeau + liste des pays (select natif invisible) + numéro */
.phone-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-field-border);
  border-radius: 5px;
  background: var(--color-white);
}

.phone-field__country {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 10px;
  cursor: pointer;
}

.phone-field__flag {
  width: 24px;
  height: 24px;
}

.phone-field__caret {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: #555;
  border-bottom: 0;
}

.phone-field__select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.phone-field__input {
  flex: 1;
  min-width: 0;
  padding: 12px 10px 12px 4px;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 23px;
}

.phone-field__input:focus { outline: none; }
.phone-field:focus-within { outline: 2px solid var(--color-navy); outline-offset: -1px; }

/* variante à bordures séparées pour le pays et le numéro (formulaire de contact) */
.phone-field--split {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.phone-field--split .phone-field__country {
  padding: 0 3px 0 13px;
  border: 1px solid var(--color-field-border);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: var(--color-white);
}

.phone-field--split .phone-field__caret { border-top-color: #777; }

.phone-field--split .phone-field__input {
  padding: 12px 10px;
  border: 1px solid var(--color-field-border);
  border-left-color: transparent;
  border-radius: 0 5px 5px 0;
  background: var(--color-white);
  color: #222;
}

.form__status:empty { display: none; }
.form__status--ok { color: #1a7f37; }
.form__status--error { color: #c62828; }


/* ---------- FAQ (accordéon natif <details>) ---------- */
.faq {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.faq__item {
  border-radius: 5px;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 15px 15px 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

/* icône dans un <span> : pivote à l'ouverture */
.faq__icon {
  flex-shrink: 0;
  line-height: 1;
}

.faq__icon::before { transition: transform .3s; }
.faq__item[open] .faq__icon::before { transform: rotate(180deg); }

.faq__answer {
  padding: 6px 15px 15px 20px;
  font-size: 16px;
  line-height: 21px;
}

/* variante foncée : fond bleu, question jaune (accueil, certifications) */
.faq--dark .faq__item {
  background: var(--color-navy);
  box-shadow: var(--shadow-soft);
  color: var(--color-white);
}

.faq--dark .faq__question {
  font-size: 20px;
  color: var(--color-yellow);
}

.faq--dark .faq__icon { color: var(--color-yellow-soft); }

/* variante claire (formations) */
.faq--light .faq__item {
  background: var(--color-faq-light);
  box-shadow: var(--shadow-strong);
}

.faq--light .faq__question { color: var(--color-navy); }
.faq--light .faq__answer { color: var(--color-text-muted); }

.faq--light .faq__icon::before {
  width: 1.25em;
  text-align: center;
}

/* ---------- Fenêtre modale (<dialog>) ---------- */
.dialog {
  width: min(600px, calc(100% - 20px));
  max-height: calc(100% - 40px);
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--color-white);
  box-shadow: var(--shadow-strong);
}

.dialog::backdrop { background: rgba(0, 0, 0, .6); }

.dialog__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #333;
}


/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* ---------- Services : introduction ---------- */
.services-intro {
  padding-bottom: 150px;
}

.services-intro__card {
  padding: 69px 10px 63px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.services-intro__title {
  margin: 0 10px;
  font-size: 49px;
  line-height: 58px;
  text-align: center;
}

.services-intro__text {
  margin-top: 62px;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
}

/* ---------- Services : cartes ---------- */
.services-list {
  padding-top: 60px;
  padding-bottom: 57px;
  background: var(--color-bg) url("../images/June2022Start7PM.webp") 50% 50% no-repeat;
}

.services-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 19.5px;
  row-gap: 215px;
  padding: 0 20px;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  border-top: 3px solid var(--color-yellow-soft);
  border-bottom: 3px solid var(--color-yellow-soft);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--color-white);
  box-shadow: var(--shadow);
}

.service-card__image {
  width: calc(100% - 20px);
  margin: -130px 0 0 10px;
  border-radius: 20px;
}

.service-card__title {
  margin-top: 25px;
  font-size: 21px;
  font-weight: 800;
  line-height: 38.4px;
}

.service-card__text {
  flex-grow: 1;
  margin-top: 15px;
  font-size: 15px;
  line-height: 20px;
}

.service-card__btn {
  margin: 10px 0 13px 10px;
  padding: 15px 21px 11px;
  font-size: 15px;
  line-height: 20px;
}

/* ---------- Services : formations et certifications ---------- */
.offer {
  padding-top: 162px;
  padding-bottom: 220px;
}

.offer__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title media"
    "text  media"
    "btn   media";
  grid-template-rows: auto auto 1fr;
  column-gap: 20px;
  align-items: start;
}

.offer__row + .offer__row {
  margin-top: 171px;
}

.offer__row--reverse {
  grid-template-areas:
    "media title"
    "media text"
    "media btn";
}

.offer__title {
  grid-area: title;
  margin: 75px 20px 0 30px;
  font-size: 32px;
  line-height: 24px;
}

.offer__text {
  grid-area: text;
  margin: 58px 20px 0 30px;
  font-size: 16px;
  line-height: 21px;
}

.offer__btn {
  grid-area: btn;
  justify-self: start;
  margin: 72px 0 0 30px;
  padding: 15px 21px 11px;
  font-size: 15px;
  line-height: 20px;
}

.offer__media {
  grid-area: media;
  margin-right: 10px;
}

.offer__row--reverse .offer__title { margin: 110px 0 0 20px; }
.offer__row--reverse .offer__text,
.offer__row--reverse .offer__btn { margin-left: 20px; margin-right: 30px; }
.offer__row--reverse .offer__media { margin: 0 0 0 10px; }


/* ======== Accueil ======== */

/* ---------- Accueil : hero ---------- */
.hero {
  background-color: var(--color-hero);
  background-image: url("../images/Designsanstitre68.webp");
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title media"
    "text  media"
    "btn   media";
  grid-template-rows: auto auto 1fr;
  column-gap: 20px;
  align-items: start;
  padding: 77px 49px 103px;
}

.hero__title {
  grid-area: title;
  margin: 25px 10px 0;
}

.hero__text {
  grid-area: text;
  margin: 35px 10px 0;
}

.hero__btn {
  grid-area: btn;
  justify-self: start;
  margin: 45px 10px 10px;
  padding: 15px 24px;
  font-size: 20px;
  line-height: 26px;
}

.hero__media {
  grid-area: media;
  width: 100%;
}

/* ---------- Accueil : « Nous vous accompagnons » ---------- */
.about {
  background-image: url("../images/Designsanstitre65.webp");
}

.about__title {
  margin: 95px 0 72px;
  text-align: center;
}

.about__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text media";
  column-gap: 20px;
  align-items: start;
  margin: 0 10px 74px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .5);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow);
}

.about__text {
  grid-area: text;
  margin: 115px 10px 47px;
  font-size: 21px;
  line-height: 27px;
}

.about__media {
  grid-area: media;
  width: calc(100% - 20px);
  margin: 39px 10px 37px;
}

/* ---------- Accueil : services (« QUE POUVONS NOUS FAIRE POUR VOUS ? ») ---------- */
.home-services {
  margin-top: 37px;             /* bande blanche d'origine entre les deux sections */
  padding-top: 29px;
  padding-bottom: 80px;
  background: var(--color-white) url("../images/June2022Start7PM.svg") 50% 50% / 100% 100% no-repeat;
  scroll-margin-top: 130px;     /* ancre « Decouvrez nos services » sous l'en-tête collant */
}

/* pastille centrée sur 10 des 12 colonnes de la grille d'origine (gouttière 20px) */
.home-services__title {
  margin: 64px calc((100% - 260px) / 12 + 40px) 0;
  font-size: 33px;
  font-weight: 400;
  line-height: 42px;
}

.home-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 83px 20px;
  align-items: start;
  margin: 76px 10px 0;
}

.service-tile {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--color-hero);
  border-radius: var(--radius);
  background: var(--color-card);
  box-shadow: var(--shadow);
}

.service-tile__image {
  width: 311px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* icône sur 3 colonnes, titre sur 9 (grille de 12 d'origine) */
.service-tile__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
  align-items: start;
}

.service-tile__icon {
  grid-column: 1 / 4;
  justify-self: center;
  width: 35px;
  margin-top: 18px;
}

.service-tile__title {
  grid-column: 4 / 13;
  margin: 15px 0;
  font-size: 20px;
  line-height: 38.4px;
}

.service-tile:nth-child(6) .service-tile__title { line-height: 34px; }

.service-tile__text {
  font-size: 18px;
  line-height: 23px;
  text-align: center;
  color: var(--color-ink);
}

/* lignes vides sous le texte dans le site d'origine (décalent le bouton) */
.service-tile:nth-child(1) .service-tile__text,
.service-tile:nth-child(2) .service-tile__text { padding-bottom: 1lh; }
.service-tile:nth-child(3) .service-tile__text,
.service-tile:nth-child(5) .service-tile__text { padding-bottom: 4lh; }
.service-tile:nth-child(6) .service-tile__text { padding-bottom: 2lh; }

.service-tile__btn {
  align-self: flex-start;
  gap: 15px;
  padding: 5px 27px;
  border: 1px solid var(--color-steel);
  font-size: 17px;
  line-height: 22px;
}

.service-tile__btn .icon {
  margin-left: 0;
  padding-left: 0;
}

/* ---------- Accueil : devenir formateur ---------- */
.join {
  padding-top: 140px;           /* inclut la bande vide de 100px qui précédait la section */
}

.join__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title media"
    "text  media"
    "btn   media";
  grid-template-rows: auto auto 1fr;
  column-gap: 20px;
  align-items: start;
  padding: 0 10px 76px;
}

.join__title {
  grid-area: title;
  margin: 95px 10px 0;
}

.join__text {
  grid-area: text;
  margin: 49px 10px 0;
}

.join__btn {
  grid-area: btn;
  justify-self: start;
  margin: 54px 10px 20px;
  padding: 15px 20px;
  font-size: 16px;
  line-height: 21px;
}

.join__media {
  grid-area: media;
  margin: 81px 0 10px;
  box-shadow: var(--shadow);
}

/* ---------- Accueil : « POURQUOI NOUS CHOISIR ? » ---------- */
.why__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "media title"
    "media faq";
  grid-template-rows: auto 1fr;
  column-gap: 20px;
  align-items: start;
  margin: 10px;
  padding: 11px;
  background: var(--color-white);
}

.why__media {
  grid-area: media;
  width: calc(100% - 20px);
  margin: 145px 10px 10px;
}

.why__title {
  grid-area: title;
  margin: 27px 42px 0 28px;
  font-size: 31px;
  font-weight: 400;
  line-height: 42px;
}

.why__faq {
  grid-area: faq;
  margin: 44px 10px 10px;
}


/* ======== Formations ======== */

/* ---------- Formations : hero ---------- */
.formations-hero {
  padding-top: 128px;
  background-image: url("../images/Designsanstitre65.webp");
}

.formations-hero__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "title media"
    "text  media"
    "btn   media";
  column-gap: 40px;
  align-items: start;
  padding: 85px 30px 52px;
  border-bottom: 5px solid var(--color-navy);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}

.formations-hero__title { grid-area: title; }

.formations-hero__image {
  grid-area: media;
  width: 100%;
  margin-top: 29px;
}

.formations-hero__text {
  grid-area: text;
  margin-top: 55px;
}

.formations-hero__btn {
  grid-area: btn;
  justify-self: start;
  gap: 15px;
  margin-top: 50px;
  padding: 15px 45px;
  color: var(--color-yellow);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.formations-hero__btn .icon,
.promo__btn .icon {
  width: 1.25em;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* ---------- Formations : catalogue ---------- */
.courses {
  padding-bottom: 148px;
}

.courses__inner {
  padding: 0 10px;
}

.courses__title {
  margin-top: 63px;
  text-align: center;
}

.courses__intro {
  margin-top: 66px;
  text-align: center;
}

.courses__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 71px 20px;
  align-items: start;
  margin-top: 63px;
  padding: 0 10px;
}

.course-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--color-white);
  box-shadow: var(--shadow);
}

.course-card__image {
  align-self: center;
  width: 100%;
  max-width: 311px;
}

.course-card__title {
  margin: 15px 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 19.2px;
}

.course-card__title--lg {
  font-size: 18px;
  line-height: 38.4px;
}

.course-card__text {
  font-size: 15px;
  line-height: 20px;
}

/* le site d'origine ajoutait deux paragraphes vides sous ce texte */
.course-card__text--spaced { padding-bottom: 40px; }

/* pastille de prix : largeur calée sur 5 colonnes (6 pour --wide) d'une grille de 12 */
.course-card__price {
  --span: 5;
  align-self: flex-start;
  width: calc(var(--span) * max(0px, (100% - 230px) / 12) + (var(--span) - 1) * 20px);
  margin: 29px 0 0 5px;
  padding: 5px 5px 5px 6px;
  color: var(--color-black);
  font-size: 14px;
  line-height: 37px;
  text-align: left;
}

.course-card__price--wide { --span: 6; }

.course-card__actions {
  display: grid;
  grid-template-columns:
    calc(7 * max(0px, (100% - 220px) / 12) + 120px)
    calc(5 * max(0px, (100% - 220px) / 12) + 80px);
  column-gap: 20px;
  align-items: start;
  margin-top: 49px;
  padding: 0 10px 10px;
}

.course-card__promo,
.course-card__more {
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
}

.course-card__promo {
  padding: 14px 11px 15px;
  line-height: 20px;
}

.course-card__more {
  justify-self: center;
  padding: 15px 15px 29px;
  border: 2px solid var(--color-navy);
  background: transparent;
  color: var(--color-navy);
  line-height: 23px;
}

/* ---------- Formations : webinaires ---------- */
.webinar {
  padding-bottom: 50px;
  background-image: url("../images/June2022Start7PM.webp");
}

.webinar__inner {
  padding: 0 10px;
}

.webinar__title {
  margin: 73px 10px 0;
  text-align: center;
}

.webinar__intro {
  margin: 77px 10px 0;
  text-align: center;
}

.webinar__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "media title"
    "media text"
    "media btn";
  column-gap: 20px;
  align-items: start;
  margin-top: 81px;
  padding: 10px;
  border: 1px solid var(--color-white);
  border-radius: 16px;
  box-shadow: var(--shadow-strong);
}

.webinar__card-title {
  grid-area: title;
  margin: 66px 41px 0 20px;
}

.webinar__image {
  grid-area: media;
  width: calc(100% - 20px);
  margin: 10px;
}

.webinar__text {
  grid-area: text;
  margin: 57px 41px 0 20px;
}

.webinar__btn {
  grid-area: btn;
  justify-self: start;
  margin: 88px 41px 20px 20px;
  padding: 15px 51px;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

/* ---------- Formations : questions fréquentes ---------- */
.formations-faq {
  padding-bottom: 106px; /* 60px + bande blanche de 46px avant le bloc code promo */
}

.formations-faq__inner {
  padding: 0 10px;
}

.formations-faq__rule {
  height: 0;
  margin: 89px 0 0;
  border: 2px solid var(--color-navy);
}

.formations-faq__title {
  margin-top: 99px;
  text-align: center;
}

/* liste centrée sur 10 colonnes d'une grille de 12 */
.formations-faq__list {
  margin: 78px calc((100% - 240px) / 12 + 30px) 0;
}


/* ---------- Formations : code promo ---------- */
.promo {
  padding-top: 160px;
  padding-bottom: 115px;
}

.promo .container {
  padding: 0 10px;
}

.promo__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "title media"
    "title btn";
  column-gap: 20px;
  align-items: start;
  padding: 20px;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .7);
}

.promo__title {
  grid-area: title;
  margin: 90px 10px 25px 28px;
}

.promo__lead {
  display: block;
  color: var(--color-black);
  font-size: 26px;
  font-weight: 400;
  line-height: 34px;
}

.promo__highlight {
  display: block;
  margin-top: 15px;
  font-size: 48px;
  line-height: 38.4px;
}

/* l'image déborde au-dessus du cadre, comme sur le site d'origine */
.promo__image {
  grid-area: media;
  justify-self: end;
  width: calc((100% - 240px) * .75 + 140px);
  margin: -136px 20px 0 0;
}

.promo__btn {
  grid-area: btn;
  justify-self: end;
  gap: 15px;
  margin: 56px 10px 11px;
  padding: 15px 56px;
  box-shadow: var(--shadow-strong);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

/* ---------- Formations : pop-up « code promo » ---------- */
.promo-dialog {
  padding: 10px;
  border: 3px solid var(--color-navy);
  border-radius: 6px;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .7);
}

.promo-dialog .dialog__close {
  top: 15px;
  right: 15px;
  font-size: 0; /* croix fine dessinée par deux traits, comme sur le site d'origine */
}

.promo-dialog .dialog__close::before,
.promo-dialog .dialog__close::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 1px;
  width: 28px;
  height: 2px;
  background: #333;
  transform: rotate(45deg);
}

.promo-dialog .dialog__close::after { transform: rotate(-45deg); }

.promo-dialog__title {
  margin: 10px 10px 28px;
  font-size: 35px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 45px;
  text-align: center;
}

.promo-dialog__text {
  font-size: 17px;
  line-height: 22px;
  text-align: center;
}

.promo-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px 20px;
  margin-top: 35px;
  padding: 0 10px;
}

.promo-form__full,
.promo-form .form__status {
  grid-column: 1 / -1;
}

.promo-form .form__field,
.promo-form .phone-field {
  box-shadow: var(--shadow-soft);
}

.promo-form .phone-field__country {
  padding-right: 6px;
  border-right: 1px solid var(--color-field-border);
}

.promo-form .phone-field__input { padding-left: 10px; }

.promo-form__submit {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: -10px;
  padding: 6px 100px 7px;
  border-radius: 0;
  font-size: 19px;
  line-height: 25px;
}

.promo-dialog__note {
  margin-top: 20px;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}


/* ======== Certifications ======== */

/* ---------- Certifications : introduction ---------- */
.cert-intro__card {
  margin-top: 62px;
  padding: 10px;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-strong);
}

.cert-intro__title {
  margin: 78px 10px 0;
  font-size: 49px;
  line-height: 62px;
  text-align: center;
}

.cert-intro__text {
  margin: 84px 10px 40px;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
}

/* ---------- Certifications : étapes et programmes (fond image) ---------- */
.cert-boost {
  background-image: url("../images/June2022Start7PM.webp");
}

.cert-boost__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title media"
    "steps media"
    "btn   media";
  grid-template-rows: auto auto 1fr;
  column-gap: 20px;
  align-items: start;
  margin-top: 98px;
  padding: 10px;
}

.cert-boost__title {
  grid-area: title;
  margin: 23px 10px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-white);
}

.cert-steps {
  grid-area: steps;
  margin: 30px 10px 0 40px;
  padding: 5px;
}

.cert-steps__item {
  display: flex;
  font-size: 18px;
  line-height: 34px;
  color: var(--color-white);
}

.cert-steps__icon {
  flex: none;
  width: 25px;
  margin-right: 10px;
  font-size: 20px;
  color: var(--color-yellow-bright);
}

.cert-steps__icon::before { line-height: inherit; }

.cert-boost__btn {
  grid-area: btn;
  justify-self: start;
  margin: 39px 0 10px 10px;
  padding: 15px 47px;
  border-radius: var(--radius);
  background: var(--color-yellow-bright);
  color: var(--color-navy);
  font-size: 19px;
  line-height: 21px;
}

.cert-boost__media {
  grid-area: media;
  width: calc(100% - 20px);
  margin: 10px;
  border: 1px solid var(--color-yellow-bright);
  border-radius: var(--radius-sm);
}

/* ---------- Certifications : pourquoi nous choisir (FAQ) ---------- */
.cert-why {
  padding-top: 259px;
  padding-bottom: 102px;
}

.cert-why__title {
  margin: 0 52px 0 38px;
  font-size: 31px;
  font-weight: 400;
  line-height: 42px;
  color: var(--color-black);
}

.cert-why__faq {
  margin: 76px 20px 0;
}


/* ======== Contact ======== */

/* ---------- Contact : coordonnées (3 cartes) ---------- */
.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  padding: 20px;
}

/* carte bordée : grille de 12 colonnes (icône sur 3, texte sur 9) comme l'original */
.contact-card {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: 20px;
  padding: 20px 20px 10px;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius);
}

.contact-card__icon {
  grid-column: span 3;
  justify-self: center;
  margin-top: 14px;
}

.contact-card__title {
  grid-column: span 9;
  margin: 25px 0;
  font-size: 16px;
  line-height: 38.4px;
}

.contact-card__list {
  grid-column: 1 / -1;
}

.contact-card__item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: 20px;
}

.contact-card__flag {
  grid-column: span 3;
  justify-self: center;
  margin-top: 14px;
}

.contact-card__text {
  grid-column: span 9;
  margin-top: 18px;
  font-size: 17px;
  line-height: 22px;
}

.contact-card__text a:hover { text-decoration: underline; }

/* adresse : alignée sur la colonne texte ; 3 lignes vides sous le texte dans l'original */
.contact-card__address {
  grid-column: 4 / span 9;
  padding-bottom: 66px;
  font-style: normal;
}

/* ---------- Contact : formulaire « Laissez un message » ---------- */
.contact-form {
  padding-bottom: 101px;
  /* à la fusion dans style.css : url("../images/Designsanstitre65.webp") */
  background-image: url("../images/Designsanstitre65.webp");
}

.contact-form__card {
  padding: 62px 10px 88px;
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: var(--shadow-glow);
}

.contact-form__pill {
  width: calc((100% - 60px) / 4 - 47px);
  margin: 49px 0 0 25px;
  color: var(--color-black);
  font-size: 18px;
  line-height: 42px;
}

.contact-form__title {
  margin: 45px 20px 0;
}

.contact-form__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: 20px;
  margin: 45px 20px 20px;
}

.contact-form__form {
  grid-column: span 7;
  display: grid;
  row-gap: 45px;
  padding: 45px 20px 20px;
}

.contact-form__names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* champ avec icône à droite (carnet d'adresses, enveloppes, carte) */
.contact-form__field {
  position: relative;
}

.contact-form__field .form__field { padding-right: 40px; }

.contact-form__icon {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 1.25em;
  height: 1em;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.contact-form__submit {
  width: 100%;
  margin-top: -4px;
  padding: 15px 20px;
  font-size: 19px;
  font-weight: 600;
  line-height: 25px;
}

/* message de confirmation / d'erreur ajouté par site.js sous le bouton */
.contact-form__form .form__status { margin-top: -25px; }

.contact-form__image {
  grid-column: span 5;
  width: calc(100% - 20px);
  margin: 10px;
}


/* ==========================================================================
   7. RESPONSIVE (≤ 800px)
   ========================================================================== */

@media (max-width: 800px) {
  :root {
    --section-padding: 5px;
  }

  .u-desktop-only { display: none !important; }
  .u-mobile-only { display: revert !important; }

  .heading--xl,
  .heading--lg,
  .heading--md { font-size: 24px; line-height: 28.8px; }
  .text--lead,
  .text--lg { font-size: 16px; line-height: 21px; }

  .btn {
    padding: 5px;
    font-size: 20px;
    line-height: 26px;
    box-shadow: none;
  }

  /* champs de formulaire */
  .form__field,
  .phone-field__input {
    font-size: 16px;
    line-height: 21px;
  }

  /* FAQ */
  .faq { padding: 0; }

  .faq .faq__question {
    padding: 10px 10px 10px 15px;
    font-size: 16px;
  }

  .faq .faq__answer { padding: 0 10px 10px 15px; }

  /* bandeau supérieur : icônes au-dessus de l'accroche centrée */
  .topbar {
    padding: 40px 20px 35px;
  }

  .topbar__inner {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 35px;
  }

  .topbar__tagline {
    margin: 0 5px;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
  }

  .social--topbar {
    width: 100%;
    justify-items: center;
  }

  /* en-tête : logo et burger centrés verticalement */
  .site-header {
    padding: 10px;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0;
  }

  .nav {
    margin: 0;
  }

  .nav__toggle {
    position: relative;
    z-index: 52;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
  }

  .nav__toggle-bar {
    display: block;
    width: 33px;
    height: 4px;
    border-radius: 3px;
    background: var(--color-black);
    transition: transform .5s cubic-bezier(.77, .2, .05, 1), opacity .55s, background-color .3s ease-in .15s;
  }

  .nav__toggle-bar:first-child { transform-origin: 0 0; }
  .nav__toggle-bar:last-child { transform-origin: 0 100%; }

  .nav--open .nav__toggle {
    position: fixed;
    top: 20px;
    right: 14px;
  }

  .nav--open .nav__toggle-bar {
    background: var(--color-ink);
    transform: rotate(45deg) translate(-2px, -1px);
  }

  .nav--open .nav__toggle-bar:nth-child(2) { opacity: 0; transform: scale(.2); }
  .nav--open .nav__toggle-bar:last-child { transform: rotate(-45deg) translate(-1px, 1px); }

  .nav__list {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 51;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    width: 0;
    padding: 50px 0 0;
    overflow: hidden auto;
    background: var(--color-white);
    transition: width .2s ease-in-out;
  }

  .nav--open .nav__list {
    width: min(80vw, 320px);
    padding-inline: 20px;
    box-shadow: 0 0 24px rgba(0, 0, 0, .25);
  }

  .nav__link { white-space: nowrap; }
  .nav__item::after { display: none; }

  .nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: block;
    background: rgba(0, 0, 0, .35);
  }

  body.is-locked { overflow: hidden; }

  /* pied de page : une colonne centrée */
  .footer-main {
    padding: 0;
  }

  .footer-main__grid {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 66px 15px 40px;
    text-align: center;
  }

  .footer-main__brand,
  .footer-main__links,
  .footer-main__contact { padding: 0; }

  .footer-brand {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .footer-brand__logo { width: 100px; }
  .footer-brand__name { margin-top: 0; font-size: 26px; line-height: 40px; }

  .footer-main__text {
    width: auto;
    margin: 30px 15px 0;
    font-size: 16px;
    line-height: 21px;
  }

  .footer-main__brand .social--footer { display: none; }

  .footer-title {
    width: auto;
    margin-top: 64px;
    padding-top: 10px;
    font-size: 26px;
    line-height: 40px;
  }

  .footer-title::after { margin-top: 18px; }

  .footer-links {
    margin-top: 49px;
    padding-left: 15px;
    font-size: 18px;
    line-height: 28px;
    text-align: left;
  }

  .footer-contact {
    margin-top: 38px;
  }

  .footer-contact__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 21px;
  }

  .footer-contact__item span { margin: 0 0 20px; }

  /* icônes groupées par paires, comme sur le site d'origine */
  .footer-main .social--mobile {
    display: flex;
    justify-content: center;
    gap: 41.5px;
    margin-top: 40px;
  }

  .social--mobile .social__item:nth-child(3) { margin-left: 20.5px; }

  .footer-legal {
    padding: 35px 20px 85px;
  }

  .footer-legal__inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 0 5px;
    text-align: center;
  }

  .footer-legal__disclaimer {
    order: 3;
    margin-top: 8px;
    font-size: 15px;
    line-height: 20px;
  }

  /* bandeau de titre */
  .page-hero {
    height: auto;
    padding: 10px 10px 20px;
  }

  .page-hero--services { padding-top: 68px; }
  .page-hero--services .page-hero__title { font-size: 28px; }

  .page-hero__title {
    font-size: 24px;
    line-height: 28.8px;
  }

  /* services */
  .services-intro { padding-bottom: 79px; }

  .services-intro__card {
    height: auto;
    margin-top: 52px;
    padding: 29px 5px 43px;
  }

  .services-intro__title {
    margin: 0 5px;
    font-size: 24px;
    line-height: 28.8px;
  }

  .services-intro__text {
    margin: 62px 5px 0;
    font-size: 16px;
    line-height: 21px;
  }

  .services-list { padding: 15px 15px 0; }

  .services-list__grid {
    grid-template-columns: 1fr;
    row-gap: 50px;
    padding: 0;
  }

  .service-card {
    align-items: stretch;
    padding: 5px;
  }

  .service-card__image {
    align-self: center;
    width: 327px;
    margin: 5px 0 0;
  }

  .service-card__title {
    margin-top: 5px;
    font-size: 24px;
    line-height: 28.8px;
    text-align: center;
  }

  .service-card__text {
    margin: 26px 5px 0;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
  }

  .service-card__btn { margin: 37px 5px 10px; width: auto; }

  .offer { padding: 30px 20px 45px; }

  .offer__row,
  .offer__row--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "media" "text" "btn";
  }

  .offer__row + .offer__row { margin-top: 35px; }

  .offer__title,
  .offer__row--reverse .offer__title {
    width: auto;
    margin: 0;
    font-size: 20px;
    line-height: 19.2px;
  }

  .offer__media,
  .offer__row--reverse .offer__media {
    justify-self: stretch;
    width: auto;
    margin-top: 31px;
    padding: 5px;
  }

  .offer__row--reverse .offer__media { margin-top: 10px; }
  .offer__row--reverse .offer__btn { margin-top: 10px; }

  .offer__text,
  .offer__row--reverse .offer__text {
    width: auto;
    margin: 48px 0 0;
    text-align: center;
  }

  .offer__btn,
  .offer__row--reverse .offer__btn {
    justify-self: stretch;
    margin: 20px 0 0;
  }

  /* ======== Accueil ======== */

  /* hero : titre, image, texte, bouton */
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "media" "text" "btn";
    grid-template-rows: none;
    padding: 79px 15px 20px;
  }

  .hero__title {
    margin: 0;
    text-align: center;
  }

  .hero__media { margin-top: 31px; }
  .hero__text { margin: 31px 0 0; }

  .hero__btn {
    justify-self: stretch;
    margin: 49px 0 0;
  }

  /* nous vous accompagnons : image au-dessus du texte */
  .about__title { margin: 74px 5px 52px; }

  .about__card {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "text";
    margin: 0 5px 5px;
    padding: 5px;
  }

  .about__media { margin: 39px 10px 0; }

  .about__text {
    margin: 43px 5px 27px;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
  }

  /* services : une colonne */
  .home-services {
    margin-top: 0;
    padding-top: 5px;
    padding-bottom: 65px;
    scroll-margin-top: 80px;
  }

  .home-services__title {
    margin: 64px 5px 0;
    padding: 15px 15px 15px 20px;
    font-size: 26px;
    line-height: 40px;
  }

  .home-services__grid {
    grid-template-columns: 1fr;
    row-gap: 55px;
    margin: 94px 5px 0;
  }

  .service-tile {
    gap: 0;
    padding: 10px 10px 15px;
  }

  .service-tile__image { align-self: center; }

  .service-tile__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 10px;
  }

  .service-tile__icon {
    align-self: center;
    margin: 0;
  }

  .service-tile__title,
  .service-tile:nth-child(6) .service-tile__title {
    margin: 0;
    font-size: 24px;
    line-height: 28.8px;
    text-align: center;
  }

  .service-tile__text {
    margin-top: 40px;
    font-size: 16px;
    line-height: 21px;
  }

  .service-tile__btn {
    align-self: stretch;
    margin-top: 15px;
  }

  /* espacements irréguliers du site d'origine sur mobile */
  .service-tile:nth-child(1) .service-tile__btn,
  .service-tile:nth-child(4) .service-tile__btn { margin-top: 33px; }
  .service-tile:nth-child(5) .service-tile__text,
  .service-tile:nth-child(6) .service-tile__text { margin-top: 10px; }
  .service-tile:nth-child(4) { margin-top: 10px; }

  /* devenir formateur : titre, image, texte, bouton */
  .join { padding-top: 25px; }

  .join__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "media" "text" "btn";
    grid-template-rows: none;
    padding: 0 0 45px;
  }

  .join__title {
    margin: 10px 10px 0;
    text-align: center;
  }

  .join__media {
    margin: 35px 5px 0;
    padding: 5px;
  }

  .join__text {
    margin: 35px 10px 0;
    text-align: center;
  }

  .join__btn {
    justify-self: stretch;
    width: auto;
    margin: 34px 10px 0;
  }

  /* pourquoi nous choisir : image, pastille, FAQ */
  .why__card {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "title" "faq";
    grid-template-rows: none;
    margin: 5px;
    padding: 5px;
  }

  .why__media {
    width: calc(100% - 10px);
    margin: 5px 5px 0;
  }

  .why__title {
    margin: 32px 5px 0;
    padding: 15px 15px 15px 20px;
    font-size: 26px;
    line-height: 40px;
  }

  .why__faq { margin: 50px 5px 5px; }

  /* ======== Formations ======== */

  /* hero : titre, image, texte, bouton */
  .formations-hero { padding-top: 86px; }

  .formations-hero__card {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "title" "media" "text" "btn";
    padding: 68px 15px 20px;
  }

  .formations-hero__image { margin-top: 35px; }
  .formations-hero__text { margin-top: 47px; }

  .formations-hero__btn {
    margin-top: 45px;
    font-size: 19px;
    line-height: 25px;
  }

  /* catalogue */
  .courses { padding-bottom: 64px; }
  .courses__inner { padding: 0 5px; }
  .courses__title { margin-top: 68px; }
  .courses__intro { margin-top: 58px; }

  .courses__grid {
    grid-template-columns: 1fr;
    row-gap: 50px;
    margin-top: 85px;
    padding: 0 5px;
  }

  .course-card:nth-child(4) { margin-top: 10px; }

  .course-card { padding: 5px; }

  .course-card__title {
    margin: 0;
    font-size: 14px;
    line-height: 16.8px;
  }

  .course-card__title--lg {
    font-size: 24px;
    line-height: 28.8px;
  }

  .course-card__text--placeholder {
    margin: 24px 5px 0;
    color: #302f2f;
    font-size: 16px;
    line-height: 21px;
  }

  .course-card__price,
  .course-card__price--wide {
    --span: 7;
    margin-top: 36px;
    padding: 15px 15px 15px 20px;
    font-size: 16px;
    line-height: 40px;
  }

  .course-card:first-child .course-card__price { font-size: 15px; }

  .course-card__btn {
    width: auto;
    font-weight: 600;
    margin: 15px 5px 11px;
  }

  /* webinaires : titre, image, texte, bouton */
  .webinar { padding: 110px 5px 128px; }
  .webinar__inner { padding: 0 5px; }
  .webinar__title { margin: 0 5px; }
  .webinar__intro { margin: 51px 5px 0; }

  .webinar__card {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "title" "media" "text" "btn";
    margin-top: 52px;
    padding: 15px 15px 20px;
  }

  .webinar__card-title {
    margin: 0;
    text-align: center;
  }

  .webinar__image {
    width: 100%;
    margin: 32px 0 0;
  }

  .webinar__text {
    margin: 36px 0 0;
    text-align: center;
  }

  .webinar__btn {
    justify-self: stretch;
    width: auto;
    margin: 37px 0 0;
  }

  /* questions fréquentes */
  .formations-faq { padding: 70px 5px 15px; }
  .formations-faq__inner { padding: 0 5px; }
  .formations-faq__rule { margin: 0; }
  .formations-faq__title { margin-top: 41px; }

  .formations-faq__list {
    margin: 26px 5px 0;
    padding: 0;
  }


  /* code promo */
  .promo { padding: 10px 5px 120px; }
  .promo .container { padding: 0 5px; }

  .promo__card {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "media" "btn";
    padding: 10px;
  }

  .promo__title {
    margin: 15px 5px 0;
    text-align: center;
  }

  .promo__lead {
    font-size: 16px;
    line-height: 21px;
  }

  .promo__highlight {
    margin-top: 0;
    font-size: 24px;
    line-height: 28.8px;
  }

  .promo__image {
    justify-self: stretch;
    width: calc(100% - 20px);
    margin: 15px 10px 0;
  }

  .promo__btn {
    justify-self: stretch;
    width: auto;
    margin: 20px 5px 10px;
    font-size: 18px;
    line-height: 23px;
  }

  /* pop-up */
  .promo-dialog { width: calc(100% - 40px); }

  .promo-dialog__title {
    margin: 5px;
    font-size: 16px;
    line-height: 21px;
  }

  .promo-dialog__text {
    font-size: 16px;
    line-height: 21px;
  }

  .promo-form {
    grid-template-columns: 1fr;
    row-gap: 20px;
    margin-top: 15px;
    padding: 0 5px;
  }

  .promo-form__half + .promo-form__half { margin-top: -10px; }


  .promo-form__submit {
    justify-self: stretch;
    margin-top: -5px;
    border-radius: 0;
  }

  .promo-dialog__note {
    margin-top: 10px;
    font-size: 16px;
    line-height: 21px;
  }

  /* ======== Certifications ======== */

  /* introduction */
  .cert-intro__card {
    margin-top: 0;
    padding: 5px;
  }

  .cert-intro__title {
    margin: 5px 5px 0;
    font-size: 24px;
    line-height: 28.8px;
  }

  .cert-intro__text {
    margin: 10px 5px 5px;
    font-size: 16px;
    line-height: 21px;
  }

  /* étapes */
  .cert-boost__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "steps" "btn";
    grid-template-rows: none;
    margin-top: 0;
    padding: 5px;
  }

  .cert-boost__title {
    margin: 37px 5px 0;
    font-size: 16px;
    line-height: 21px;
  }

  .cert-steps { margin: 10px 5px 0 15px; }

  .cert-steps__item { line-height: 28px; }

  .cert-boost__btn {
    justify-self: stretch;
    width: auto;
    margin: 27px 5px 43px;
  }

  /* FAQ */
  .cert-why {
    padding-top: 43px;
    padding-bottom: 35px;
  }

  .cert-why__title {
    margin: 0 10px;
    padding: 15px 15px 15px 20px;
    font-size: 26px;
    line-height: 40px;
  }

  .cert-why__faq {
    margin: 10px 10px 0;
    padding: 0;
  }

  /* ======== Contact ======== */

  /* coordonnées : cartes empilées, contenu centré */
  .contact-info__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding: 73px 10px 10px;
  }

  .contact-card {
    display: block;
    padding: 10px;
  }

  .contact-card__icon,
  .contact-card__flag { margin: 0 auto; }

  .contact-card__title {
    margin: 0;
    font-size: 24px;
    line-height: 28.8px;
    text-align: center;
  }

  .contact-card__item {
    display: block;
    margin-top: 10px;
  }

  .contact-card--email .contact-card__list { padding-top: 10px; }

  .contact-card__text {
    margin: 0;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
  }

  .contact-card__address {
    margin-top: 20px;
    padding-bottom: 63px;
  }

  /* formulaire : pastille pleine largeur, image masquée */
  .contact-form { padding: 55px 5px 131px; }

  .contact-form__card { padding: 5px; }

  .contact-form__pill {
    width: auto;
    margin: 42px 0 0;
    padding: 15px 15px 15px 20px;
    font-size: 26px;
    line-height: 40px;
  }

  .contact-form__title { margin: 71px 10px 0; }

  .contact-form__body {
    display: block;
    margin: 0;
  }

  .contact-form__form {
    row-gap: 20px;
    padding: 40px 20px 35px;
  }

  .contact-form__names {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .contact-form__submit { margin-top: -5px; }

  .contact-form__icon { font-size: 16px; }

  .contact-form__form .form__status { margin-top: 0; }

  .contact-form__image { display: none; }
}


/* ==========================================================================
   8. ANIMATIONS
   ========================================================================== */

@keyframes glimmer {
  0%  { transform: translate(-80%, 0); }
  50% { transform: translate(80%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn::after { animation: none; }
}