/* ==========================================================================
   Module « meridien » : les sections de l'accueil propres au site MeridienWeb
   (gabarits dans app/modules/meridien/). Chargé après base.css et site.css, avant le
   thème theme-meridien, qui donne l'apparence générale (polices, titres, boutons).
   Couleurs : celles de data/site.php (var(--navy)…), plus les quatre couleurs des
   pastilles, propres au site (variables --meridien-… ci-dessous).

   Sommaire :
     1. Police manuscrite et variables
     2. Pastilles d'icônes (notre concept)
     3. Phrase manuscrite (groupe meridien_annotation)
     4. Notre concept (groupe meridien_concept)
     5. Modèles de sites (groupe meridien_modeles)
     6. Processus (groupe meridien_processus)
     7. Appel à l'action (groupe meridien_action)

   Les règles de chaque section commencent par le nom de la section (.concept .h2…) : elles
   passent ainsi avant celles du thème, chargé après, qui ne visent que les classes du cœur.
   Tailles d'écran, celles du CMS : 1279 px, 960 px, 720 px. Mise en page : flex, jamais grid.
   Code sous licence : usage réservé au site livré, copie et revente interdites (voir LICENCE.md).
   ========================================================================== */

/* ---------- 1. Police manuscrite et variables */

/* Caveat (SIL Open Font License) : la phrase manuscrite seulement */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/caveat-latin.woff2') format('woff2'); }

:root {
  --meridien-script: 'Caveat', 'Segoe Print', cursive;
  /* Pastilles : couleur de l'icône, puis fond très clair */
  --meridien-vert: #2BB170;
  --meridien-vert-clair: #E6F7EF;
  --meridien-bleu: #2F7FE0;
  --meridien-bleu-clair: #E8F3FC;
  --meridien-rouge: #EF4A43;
  --meridien-rouge-clair: #FFECEA;
  /* Orange foncé, lisible pour les petits liens sur fond clair (contraste AA) */
  --meridien-orange-texte: #B54800;
  --meridien-radius: 10px;
  --meridien-shadow: 0 8px 24px rgba(12, 35, 64, .08);
}

/* ---------- 2. Pastilles d'icônes (notre concept) : rond de couleur claire, icône foncée */

.pastille { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; }
.pastille .icon { width: 34px; height: 34px; }
.pastille--orange { background: var(--yellow-soft); color: var(--yellow); }
.pastille--vert { background: var(--meridien-vert-clair); color: var(--meridien-vert); }
.pastille--bleu { background: var(--meridien-bleu-clair); color: var(--meridien-bleu); }
.pastille--rouge { background: var(--meridien-rouge-clair); color: var(--meridien-rouge); }

/* ---------- 3. Phrase manuscrite (groupe meridien_annotation), avec sa flèche dessinée */

.annotation { position: relative; z-index: 2; width: fit-content; max-width: calc(100% - 96px); margin: 32px 12% 0 auto; font-family: var(--meridien-script); font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--navy); text-align: center; transform: rotate(-4deg); }
/* La flèche ne pointe vers le haut de page que si la phrase le suit directement */
.hero--light + .annotation::before, .reassurance + .annotation::before { content: ''; position: absolute; top: -24px; left: -52px; width: 48px; height: 36px; background: url('img/fleche.svg') no-repeat center / contain; }
/* Juste sous le haut de page (ou son bandeau d'arguments) : la phrase mord sur la vague */
.hero--light + .annotation, .reassurance + .annotation { margin-top: -56px; }

/* Sous 1280 px, le visuel du haut de page passe sous le texte : la phrase se centre */
@media (max-width: 1279px) {
  .annotation, .hero--light + .annotation, .reassurance + .annotation { margin: 8px auto 0; }
  .hero--light + .annotation::before, .reassurance + .annotation::before { top: -14px; }
}

/* ---------- 4. Notre concept (groupe meridien_concept) : atouts centrés, séparés par un trait */

.concept { padding-top: 24px; text-align: center; }
.concept__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 36px; }
.concept__item { flex: 1 1 0; min-width: 0; padding: 0 16px; }
.concept__item + .concept__item { border-left: 1px solid var(--line); }
.concept .concept__title { margin-bottom: 12px; font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--navy); }
.concept__text { max-width: 256px; margin: 0 auto; }

@media (max-width: 1279px) {
  .concept { padding-top: 40px; }
}
@media (max-width: 960px) {
  .concept__item { flex: 0 0 50%; }
  .concept__item + .concept__item { border-left: 0; }
}
@media (max-width: 720px) {
  .concept__item { flex-basis: 100%; }
}

/* ---------- 5. Modèles de sites (groupe meridien_modeles) : titres et bouton, puis les cartes */

.modeles .section__titles { max-width: 760px; gap: 6px; }
.modeles__intro { margin: 0; }
.modeles .modeles__all { flex: none; min-height: 40px; padding: 8px 20px; border: 1.5px solid var(--teal); border-radius: 32px; font-size: 15px; font-weight: 600; color: var(--teal); background: transparent; }
.modeles .modeles__all:hover { background: var(--teal); color: var(--white); }
.modeles .stack { gap: 32px; }

/* Quatre cartes par ligne (deux sur tablette, une sur téléphone), de la même largeur */
.modeles__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.modele { flex: 1 1 calc((100% - 72px) / 4 - 1px); max-width: calc((100% - 72px) / 4); min-width: 0; display: flex; flex-direction: column; padding-bottom: 24px; overflow: hidden; border-radius: var(--meridien-radius); background: var(--white); box-shadow: var(--meridien-shadow); }
.modele__media { position: relative; }
.modele__img { width: 100%; aspect-ratio: 18 / 11; object-fit: cover; }
.modele__img.placeholder { min-height: 0; }
.modele__pastille { position: absolute; left: 16px; bottom: -24px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 3px solid var(--white); border-radius: 50%; color: var(--white); }
.modele__pastille .icon { width: 22px; height: 22px; }
.modele__pastille--orange { background: var(--yellow); }
.modele__pastille--vert { background: var(--meridien-vert); }
.modele__pastille--bleu { background: var(--meridien-bleu); }
.modele__pastille--rouge { background: var(--meridien-rouge); }
.modele__title, .modele__text, .modele__link { margin-left: 20px; margin-right: 20px; }
.modeles .modele__title { margin-top: 32px; margin-bottom: 6px; font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--navy); }
.modele__text { flex-grow: 1; margin-bottom: 16px; font-size: 15px; line-height: 1.6; }
.modeles .modele__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--meridien-orange-texte); }
.modeles .modele__link:hover { color: var(--meridien-orange-texte); text-decoration: underline; }

@media (max-width: 960px) {
  .modele { flex-basis: calc((100% - 24px) / 2 - 1px); max-width: calc((100% - 24px) / 2); }
}
@media (max-width: 720px) {
  .modele { flex-basis: 100%; max-width: 100%; }
}

/* ---------- 6. Processus (groupe meridien_processus) : étapes numérotées, reliées par des flèches */

.processus .section__titles { gap: 6px; }
.processus__intro { margin: 0; }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 32px; counter-reset: etape; }
.etape { position: relative; flex: 1 1 0; min-width: 0; padding-right: 16px; counter-increment: etape; }
/* Numéro de l'étape, dans une pastille orange (le numéro vient de la liste numérotée) */
.etape::before { content: counter(etape); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); font-weight: 700; font-size: 19px; color: var(--white); }
.etape__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 0 12px 48px; border-radius: 50%; background: var(--meridien-bleu-clair); color: var(--navy); }
.etape__icon .icon { width: 30px; height: 30px; }
.processus .etape__title { margin: 0 0 5px 16px; font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--navy); }
.etape__text { margin-left: 16px; }
/* Sur ordinateur : une flèche entre deux étapes */
.etape + .etape { padding-left: 16px; }
.etape + .etape::before { left: 16px; }
.etape + .etape::after { content: ''; position: absolute; top: 52px; left: -28px; width: 20px; height: 20px; background: url('img/fleche-etape.svg') no-repeat center / contain; }
.etape + .etape .etape__icon { margin-left: 64px; }
.etape + .etape .etape__title, .etape + .etape .etape__text { margin-left: 32px; }

@media (max-width: 960px) {
  .etape, .etape + .etape { flex: 0 0 50%; padding-left: 0; }
  .etape + .etape::before { left: 0; }
  .etape + .etape::after { display: none; }
  .etape + .etape .etape__icon { margin-left: 48px; }
  .etape + .etape .etape__title, .etape + .etape .etape__text { margin-left: 16px; }
}
@media (max-width: 720px) {
  .etape, .etape + .etape { flex-basis: 100%; }
}

/* ---------- 7. Appel à l'action (groupe meridien_action) : bandeau sombre sur photo de réseau,
   arrondi en haut ; texte et boutons à gauche, bénéfices dans un cadre à droite.
   Le dégradé reprend le bleu nuit le plus sombre (--navy-dark), en transparence. */

.action { padding: var(--pad) 0; border-radius: 48px 48px 0 0; background: linear-gradient(90deg, rgba(6, 26, 51, .96) 0%, rgba(6, 26, 51, .85) 45%, rgba(6, 26, 51, .35) 100%), var(--navy-dark) url('img/fond-reseau.webp') center / cover no-repeat; color: var(--pale-2); }
.action__in { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.action__text { flex: 0 1 55%; min-width: 0; }
.action--seule .action__text { flex-basis: 760px; }
.action .kicker { margin-bottom: 12px; color: var(--pale); }
.action .action__title { margin-bottom: 12px; font-size: clamp(32px, 6vw, 40px); color: var(--white); }
.action__hl { color: var(--yellow); }
.action__lead { max-width: 528px; margin-bottom: 28px; font-size: 17px; }
.action .btns { gap: 12px 16px; }
/* Second bouton : contour blanc arrondi */
.action .action__btn2 { border-color: var(--white); border-radius: 32px; color: var(--white); background: transparent; }
.action .action__btn2:hover { background: var(--white); color: var(--navy); }

.action__list { flex: 0 1 40%; max-width: 416px; list-style: none; margin: 0; padding: 8px; display: flex; flex-wrap: wrap; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--meridien-radius); background: rgba(10, 30, 56, .72); }
.action__list li { width: 50%; display: flex; align-items: center; gap: 14px; padding: 16px; font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--white); }
.action__list li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
.action__list li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .12); }
.action__icon { width: 28px; height: 28px; color: var(--teal-light); }

@media (max-width: 960px) {
  .action { border-radius: 32px 32px 0 0; background: linear-gradient(180deg, rgba(6, 26, 51, .92) 0%, rgba(6, 26, 51, .8) 100%), var(--navy-dark) url('img/fond-reseau.webp') center / cover no-repeat; }
  .action__in { flex-direction: column; align-items: stretch; }
  .action__text, .action__list { flex: none; max-width: none; }
}
@media (max-width: 720px) {
  .action__list li { width: 100%; }
  .action__list li:nth-child(odd) { border-right: 0; }
  .action__list li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
}