/* =========================================================================
   AG Santé Consulting — feuille de style
   Partie 1 : CSS des maquettes, repris à l'identique.
   Partie 2 (en fin de fichier) : compléments nécessaires à l'intégration
   SPIP — formulaires, pagination, accessibilité, adaptation mobile.
   ========================================================================= */
:root {
    --or: #C8A050; --or-clair: #E6C98C; --or-fonce: #A87C3A;
    --bleu-vague: #5BB0D8; --bleu-profond: #122F3F; --anthracite: #3E4A52;
    --ardoise: #869099; --texte: #1A1A1A; --gris-clair: #EEF1F3;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Carlito', 'Calibri', sans-serif; color: var(--texte); background: #fff; line-height: 1.6; }
  h1, h2, h3, .serif { font-family: 'Caladea', 'Georgia', serif; }
  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
  .kick { font-size: 13px; letter-spacing: 3px; color: var(--or-fonce); font-weight: bold; text-transform: uppercase; margin-bottom: 14px; }
  .btn { display: inline-block; padding: 13px 28px; font-size: 16px; font-weight: bold; text-decoration: none; border-radius: 2px; }
  .btn-or { background: var(--or); color: var(--bleu-profond); }
  .btn-ghost { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; }
  .btn-bleu { background: var(--bleu-profond); color: #fff; }
  nav { border-bottom: 1px solid var(--gris-clair); background:#fff; }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
  nav .brand { display: flex; align-items: center; gap: 12px; font-family: 'Caladea', serif; font-weight: bold; color: var(--bleu-profond); font-size: 18px; }
  nav .brand img { width: 44px; height: 44px; }
  nav .links { display: flex; gap: 22px; font-size: 14.5px; }
  nav .links a { color: var(--anthracite); text-decoration: none; }
  nav .links a.on { color: var(--bleu-profond); font-weight: bold; border-bottom: 2px solid var(--or); padding-bottom: 4px; }
  nav .links a.cta { color: var(--or-fonce); font-weight: bold; }
  .hero { background: linear-gradient(150deg, var(--bleu-profond) 0%, #0d2430 60%, var(--anthracite) 100%); color: #fff; position: relative; overflow: hidden; }
  .hero .wrap { padding: 84px 32px 72px; position: relative; }
  .hero.slim .wrap { padding: 56px 32px 48px; }
  .hero .wm { position: absolute; right: -90px; top: -60px; width: 460px; opacity: 0.07; }
  .hero h1 { font-size: 46px; line-height: 1.18; max-width: 760px; }
  .hero.slim h1 { font-size: 38px; }
  .hero .base { font-family: 'Caladea', serif; font-style: italic; color: var(--or-clair); font-size: 21px; margin-top: 18px; }
  .hero p.intro { font-size: 18px; color: #dfe6ea; max-width: 680px; margin-top: 22px; }
  .hero .actions { margin-top: 34px; display: flex; gap: 16px; }
  .hero .kick { color: var(--or); }
  section.std { padding: 64px 0; }
  section.std h2 { font-size: 30px; color: var(--bleu-profond); margin-bottom: 8px; }
  section.gris { background: var(--gris-clair); }
  .chiffres { background: #fff; border-bottom: 1px solid var(--gris-clair); }
  .chiffres .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 42px 32px; }
  .chiffres .c { border-top: 3px solid var(--or); padding-top: 14px; }
  .chiffres .n { font-family: 'Caladea', serif; font-size: 34px; font-weight: bold; color: var(--bleu-profond); }
  .chiffres p { font-size: 14.5px; color: var(--anthracite); line-height: 1.4; margin-top: 4px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
  .cards.c3 { grid-template-columns: 1fr 1fr 1fr; }
  .card { background: #fff; border-top: 4px solid var(--bleu-profond); padding: 30px 32px; }
  .card.ms, .card.gold { border-top-color: var(--or); }
  .card .tag { font-size: 12px; letter-spacing: 2.5px; color: var(--or-fonce); font-weight: bold; text-transform: uppercase; }
  .card h3 { font-size: 21px; color: var(--bleu-profond); margin: 8px 0 10px; }
  .card p { font-size: 15px; color: var(--anthracite); margin-bottom: 14px; }
  .card ul { list-style: none; margin-bottom: 18px; }
  .card li { font-size: 15px; padding: 4px 0 4px 22px; position: relative; }
  .card li::before { content: "—"; position: absolute; left: 0; color: var(--or-fonce); font-weight: bold; }
  .card a.more { color: var(--bleu-profond); font-weight: bold; text-decoration: none; font-size: 15.5px; }
  .card a.more span { color: var(--or-fonce); }
  .pourqui { background: var(--gris-clair); border-left: 4px solid var(--or); padding: 20px 26px; font-size: 16.5px; margin: 26px 0; }
  .pourqui b { color: var(--bleu-profond); }
  .steps { margin: 26px 0; }
  .step { display: flex; gap: 20px; margin-bottom: 18px; }
  .step .n { width: 40px; height: 40px; min-width: 40px; border: 2px solid var(--or); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Caladea', serif; font-weight: bold; color: var(--or-fonce); font-size: 18px; margin-top: 2px; }
  .step b { color: var(--bleu-profond); }
  .step p { font-size: 15.5px; color: var(--texte); }
  .tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 26px 0; }
  .tuile { border: 1px solid #cdd4d9; border-top: 4px solid var(--bleu-profond); padding: 18px 20px; }
  .tuile .t { font-family: 'Caladea', serif; font-weight: bold; color: var(--bleu-profond); font-size: 17px; }
  .tuile .d { font-size: 14px; color: var(--or-fonce); font-weight: bold; margin: 4px 0 8px; }
  .tuile p { font-size: 14px; color: var(--anthracite); }
  .quote { border-left: 3px solid var(--or); padding-left: 24px; margin: 34px 0; }
  .quote p { font-family: 'Caladea', serif; font-style: italic; font-size: 18px; line-height: 1.55; color: var(--anthracite); }
  .quote .who { margin-top: 12px; font-size: 14px; font-weight: bold; color: var(--or-fonce); }
  .dark-band { background: var(--bleu-profond); color: #fff; padding: 56px 0; }
  .dark-band h2 { font-size: 28px; }
  .dark-band .kick { color: var(--or); }
  .dark-band p, .dark-band li { color: #dfe6ea; }
  .cta-final { padding: 70px 0; text-align: center; }
  .cta-final h2 { font-size: 34px; color: var(--bleu-profond); }
  .cta-final p { font-size: 17px; color: var(--anthracite); margin: 14px auto 26px; max-width: 560px; }
  .cta-final .coords { margin-top: 22px; font-size: 16px; color: var(--anthracite); }
  .cta-final .coords b { color: var(--bleu-profond); }
  footer { background: #0d2430; color: #a9b4bb; padding: 44px 0 30px; font-size: 14px; }
  footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
  footer .base { font-family: 'Caladea', serif; font-style: italic; color: var(--or-clair); font-size: 15.5px; margin: 10px 0; }
  footer h4 { color: #fff; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; font-family: 'Carlito', sans-serif; }
  footer a { color: #a9b4bb; text-decoration: none; display: block; padding: 3px 0; }
  footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 26px; padding-top: 18px; font-size: 12.5px; line-height: 1.6; }
  .content-col { max-width: 820px; }
  .content-col h2 { font-size: 26px; color: var(--bleu-profond); margin: 34px 0 12px; }
  .content-col > p { font-size: 16.5px; margin-bottom: 14px; }
  .form-mock { background: var(--gris-clair); padding: 34px 38px; margin-top: 30px; max-width: 620px; }
  .form-mock label { display:block; font-size: 14px; font-weight: bold; color: var(--anthracite); margin: 14px 0 6px; }
  .form-mock input, .form-mock textarea { width: 100%; border: 1px solid #cdd4d9; background:#fff; padding: 10px 12px; font-size: 15px; font-family: inherit; }
  .regard-grid { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
  .regard-grid img { width: 100%; border: 3px solid var(--or); }

/* =========================================================================
   Partie 2 — compléments d'intégration SPIP
   ========================================================================= */

/* Chapeaux servis par une balise SPIP : le contenu arrive enveloppé dans des
   <p>, on déplace donc la mise en forme de .hero p.intro sur le conteneur. */
.hero .intro { font-size: 18px; color: #dfe6ea; max-width: 680px; margin-top: 22px; }
.hero .intro p + p { margin-top: 12px; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--or-fonce); }

/* Lien d'évitement — accessibilité clavier */
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 0; top: 0; z-index: 100; padding: 10px 18px; background: var(--or); color: var(--bleu-profond); font-weight: bold; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* Formulaires SPIP habillés comme le bloc .form-mock des maquettes */
.form-mock .formulaire_spip { margin: 0; }
.form-mock fieldset { border: 0; padding: 0; }
.form-mock legend { display: none; }
.form-mock .editer { margin: 0; }
.form-mock label { display: block; font-size: 14px; font-weight: bold; color: var(--anthracite); margin: 14px 0 6px; }
.form-mock input[type=text], .form-mock input[type=email], .form-mock textarea, .form-mock select {
	width: 100%; border: 1px solid #cdd4d9; background: #fff; padding: 10px 12px; font-size: 15px; font-family: inherit;
}
.form-mock .explication { font-size: 13px; color: var(--ardoise); margin-top: 4px; }
.form-mock .boutons { margin-top: 18px; padding: 0; }
.form-mock .boutons input[type=submit], .form-mock button[type=submit] {
	display: inline-block; padding: 13px 28px; font-size: 16px; font-weight: bold; border: 0; border-radius: 2px;
	background: var(--or); color: var(--bleu-profond); cursor: pointer; font-family: inherit;
}
.form-mock .reponse_formulaire { padding: 14px 16px; margin-bottom: 16px; font-size: 15px; }
.form-mock .reponse_formulaire_ok { background: #fff; border-left: 4px solid var(--or); }
.form-mock .reponse_formulaire_erreur { background: #fff; border-left: 4px solid #b23c2e; }
.form-mock .erreur_message { display: block; color: #b23c2e; font-size: 13.5px; font-weight: bold; margin-top: 4px; }

/* Pagination du fil d'actualités */
.pagination { margin-top: 34px; font-size: 15px; color: var(--anthracite); }
.pagination .pagination__item, .pagination a, .pagination strong { display: inline-block; padding: 6px 12px; margin-right: 4px; text-decoration: none; }
.pagination a { color: var(--bleu-profond); border: 1px solid #cdd4d9; }
.pagination a:hover { border-color: var(--or); }
.pagination strong { background: var(--bleu-profond); color: #fff; }

/* Adaptation aux petits écrans — les maquettes sont dimensionnées pour le poste fixe */
@media (max-width: 900px) {
	.wrap { padding: 0 20px; }
	nav .wrap { height: auto; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
	nav .links { flex-wrap: wrap; gap: 14px; }
	.hero .wrap { padding: 48px 20px 42px; }
	.hero h1 { font-size: 32px; }
	.hero.slim h1 { font-size: 28px; }
	.chiffres .wrap, .cards, .cards.c3, .tuiles, .regard-grid, footer .wrap { grid-template-columns: 1fr; }
	.regard-grid img { max-width: 280px; }
	section.std { padding: 42px 0; }
	.hero .actions { flex-direction: column; align-items: flex-start; }
}

/* Variantes de vignettes et de citations pilotées par les squelettes */
.card--large { grid-column: 1 / -1; }
.card--actu { border-top-color: var(--bleu-vague); }
.quote--nue { margin: 0; }
.quote--sombre p { color: #dfe6ea; }
.quote--sombre .who { color: var(--or); }
.dark-band .quote--sombre { border-left-color: var(--or); }
.tuiles--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .tuiles--4 { grid-template-columns: 1fr 1fr; } }

/* Liens sur fond sombre — bandeau « Ils en parlent », bandeau haut, encarts
   bleu profond. Sans cette règle, les liens produits par le champ Texte
   retombent sur le bleu par défaut du navigateur, illisible sur #122F3F et
   étranger à la charte.

   Le bleu vague est la seconde couleur de l'identité (la vague du logo) : il
   conserve l'affordance du lien bleu tout en restant dans la charte, et se
   distingue de l'or, déjà porteur des sur-titres et des attributions de
   citation. Contraste sur bleu profond : 5,7:1 au repos, 8,7:1 au survol —
   au-dessus du seuil AA dans les deux états. Le soulignement est maintenu :
   la couleur seule ne doit pas porter l'information. */
.dark-band a,
.hero a:not(.btn) {
	color: var(--bleu-vague);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.dark-band a:hover, .dark-band a:focus-visible,
.hero a:not(.btn):hover, .hero a:not(.btn):focus-visible {
	color: var(--or-clair);
}

/* Sur-titre sans contenu : le squelette de rubrique générique n'en fournit
   pas, inutile d'en réserver la gouttière. */
.kick:empty { display: none; }
/* Variante explicite de la vignette sanitaire — évite d'affecter une valeur
   vide à une variable de squelette, ce que la syntaxe SPIP supporte mal. */
.card--sanitaire { border-top-color: var(--bleu-profond); }

/* Listes numérotées saisies dans le champ Texte.
   Le raccourci SPIP -# produit un <ol class="spip"> ; on lui donne ici
   l'apparence des étapes de la maquette — pastille ronde cerclée d'or,
   chiffre en Caladea — sans que le rédacteur ait à connaître un modèle.
   Les valeurs reprennent celles de .step et .step .n, à l'identique. */
.content-col ol {
	counter-reset: etape;
	list-style: none;
	margin: 26px 0;
	padding: 0;
}
.content-col ol > li {
	position: relative;
	padding-left: 60px;
	min-height: 44px;
	margin-bottom: 18px;
	font-size: 15.5px;
	color: var(--texte);
}
.content-col ol > li::before {
	counter-increment: etape;
	content: counter(etape);
	position: absolute;
	left: 0;
	top: 2px;
	width: 40px;
	height: 40px;
	border: 2px solid var(--or);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Caladea', Georgia, serif;
	font-weight: bold;
	color: var(--or-fonce);
	font-size: 18px;
}
/* Un intitulé en gras ouvrant la puce passe à la ligne, en bleu profond,
   comme le <b> des étapes de la maquette. */
.content-col ol > li > strong:first-child,
.content-col ol > li > b:first-child {
	display: block;
	color: var(--bleu-profond);
	font-weight: bold;
}
.content-col ol > li p { font-size: 15.5px; margin: 0; }
.content-col ol ol { margin: 12px 0 0; }
@media (max-width: 900px) {
	.content-col ol > li { padding-left: 48px; }
	.content-col ol > li::before { width: 34px; height: 34px; font-size: 16px; }
}

/* Plan du site — même vocabulaire que les listes des vignettes : tiret doré,
   titres en bleu profond, deux niveaux d'indentation. Le plan reprend la
   largeur de la colonne de contenu sans en reprendre la classe : les listes
   d'un plan n'ont pas à porter les pastilles des fiches éditoriales. */
.plan { max-width: 820px; }
.plan h2 { font-size: 22px; color: var(--bleu-profond); margin: 34px 0 10px; }
.plan h2:first-child { margin-top: 0; }
.plan h2 a { color: inherit; text-decoration: none; }
.plan h2 a:hover { color: var(--or-fonce); }
.plan__descriptif { font-size: 15px; color: var(--anthracite); margin-bottom: 10px; }
.plan ul { list-style: none; margin: 0 0 10px; padding: 0; }
.plan li { position: relative; padding: 4px 0 4px 22px; font-size: 15.5px; }
.plan li::before { content: "—"; position: absolute; left: 0; color: var(--or-fonce); font-weight: bold; }
.plan ul ul { margin: 4px 0 8px 4px; }
.plan ul ul li::before { content: "·"; }
.plan a { color: var(--bleu-profond); text-decoration: none; }
.plan a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Une famille de formations réduite à une seule vignette occupe toute la
   largeur, sans qu'il faille la marquer : la grille compte deux colonnes et
   une carte isolée y paraîtrait tronquée. */
.cards .card:only-child { grid-column: 1 / -1; }

/* Listes à puces saisies dans le champ Texte : pastille ✓ des objectifs
   pédagogiques. Même géométrie que les étapes numérotées, la bordure en
   moins pour distinguer un acquis d'une séquence. */
.content-col ul {
	list-style: none;
	margin: 26px 0;
	padding: 0;
}
.content-col ul > li {
	position: relative;
	padding-left: 60px;
	min-height: 44px;
	margin-bottom: 14px;
	font-size: 15.5px;
	color: var(--texte);
}
.content-col ul > li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 2px;
	width: 40px;
	height: 40px;
	border: 2px solid var(--or);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--or-fonce);
	font-size: 17px;
	font-weight: bold;
}
.content-col ul > li > strong:first-child,
.content-col ul > li > b:first-child { display: block; color: var(--bleu-profond); }
.content-col ul ul { margin: 10px 0 0; }
@media (max-width: 900px) {
	.content-col ul > li { padding-left: 48px; }
	.content-col ul > li::before { width: 34px; height: 34px; font-size: 15px; }
}