/* Feuille de style du site syntoni.fr
   Couleurs et typographie : BrandBoard Syntoni (Alegreya Sans, palette principale et neutres). */

@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/alegreya-sans-400-latin.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: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/alegreya-sans-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("polices/alegreya-sans-400-italic-latin.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: "Alegreya Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("polices/alegreya-sans-400-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/alegreya-sans-500-latin.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: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/alegreya-sans-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/alegreya-sans-700-latin.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: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/alegreya-sans-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Couleurs de la charte (BrandBoard) */
  --nuit: #1B0C51;        /* Nuit marine */
  --celeste: #16B2CE;     /* Céleste mers du sud */
  --emeraude: #1EC88C;    /* Printemps émeraude */
  --citron: #C8FA64;      /* Citron chartreuse */
  --tiffany: #64C8AA;     /* Glaz tiffany */
  --canard: #007882;      /* Bondi canard */
  --minuit: #0F4682;      /* Bleu de minuit */
  --lavande: #B2A0FC;     /* Lavande */
  --lait: #F5F5F0;        /* Blanc de lait */
  --argile: #E4E4DE;      /* Gris argile */
  --taupe: #5E6058;       /* Bis taupe */
  --anthracite: #232322;  /* Noir anthracite */
  /* Teintes de texte reprises de l'ancien site */
  --gris-texte: #56585E;
  --bleu-texte: #104F8A;
  --canard-texte: #117B7B;

  --police: "Alegreya Sans", system-ui, sans-serif;
  --largeur: 1224px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--lait); color: var(--anthracite); font-family: var(--police); font-size: 18px; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--canard); text-underline-offset: 0.15em; }
a:hover { color: var(--nuit); }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
h1, h2, h3 { font-weight: 700; line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
p, ul, ol { margin: 0 0 1em; }
.centre { text-align: center; }
.evitement { position: absolute; left: -999px; top: 0; background: var(--nuit); color: var(--lait); padding: 0.5rem 1rem; }
.evitement:focus { left: 1rem; z-index: 10; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cadre-large { max-width: var(--largeur); margin-inline: auto; padding-inline: 16px; }

/* Bandeau de contact en haut de page */
.barre-contact { background: var(--nuit); color: var(--lait); text-align: center; font-size: 14px; padding: 6px 16px; }
.barre-contact a { color: var(--lait); }
.barre-contact__tel { margin-left: 1rem; text-decoration: none; }

/* En-tête */
.entete { background: var(--lait); }
.entete__interieur { max-width: 1340px; margin-inline: auto; padding: 14px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.entete__logo img { width: 160px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.menu a { color: #0D131A; text-decoration: none; font-size: 16px; }
.menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* Bandes de titre */
.bande { padding: 16px; text-align: center; }
.bande--nuit { background: var(--nuit); color: var(--lait); }
.bande__titre { font-size: 36px; margin: 0.35em auto; max-width: 18em; color: inherit; }

/* Accueil : les trois domaines en ronds à double anneau */
.domaines-ronds { background-color: var(--lait); background-size: cover; background-position: center; padding: 40px 16px 56px; }
.domaines-ronds__titre { color: var(--taupe); text-align: center; font-size: 30px; margin-bottom: 40px; }
.ronds { list-style: none; margin: 0 auto; padding: 0; max-width: var(--largeur); display: flex; flex-wrap: wrap; justify-content: space-around; gap: 32px; }
.rond { width: 320px; height: 320px; border-radius: 50%; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-weight: 700; font-size: 28px; line-height: 1.25; background: var(--lait); border: 14.5px solid var(--anneau); transition: transform 0.2s ease; }
.rond:hover { transform: scale(1.03); }
.rond__haut, .rond__bas { color: var(--taupe); }
.rond__milieu { margin: 4px 0; }
.anneau-nuit { --anneau: var(--nuit); }
.anneau-celeste { --anneau: var(--celeste); }
.anneau-citron { --anneau: var(--citron); }
.texte-nuit { color: var(--nuit); }
.texte-bleu { color: var(--bleu-texte); }
.texte-canard { color: var(--canard-texte); }
@media (prefers-reduced-motion: reduce) { .rond { transition: none; } .rond:hover { transform: none; } }
@media (max-width: 400px) { .rond { width: 280px; height: 280px; font-size: 24px; border-width: 12px; } }

/* Liste des articles (accueil et publications) */
.cartes { list-style: none; margin: 0; padding: 60px 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
@media (max-width: 760px) { .cartes { grid-template-columns: 1fr; padding-top: 32px; } }
.carte a { display: flex; flex-direction: column; text-decoration: none; color: var(--anthracite); }
.carte__image { display: block; aspect-ratio: 16 / 10; background: var(--argile); overflow: hidden; margin-bottom: 16px; }
.carte__image img { width: 100%; height: 100%; object-fit: cover; }
.carte__titre { font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--anthracite); margin-bottom: 10px; }
.carte a:hover .carte__titre { text-decoration: underline; }
.carte__auteur, .carte__date { font-size: 14px; color: var(--gris-texte); }
.bouton-pilule { display: inline-block; border-radius: 999px; text-decoration: none; font-weight: 700; padding: 14px 40px; font-size: 18px; line-height: 1.2; }
.bouton-pilule--contour { border: 1.5px solid var(--nuit); color: var(--nuit); margin-bottom: 60px; }
.bouton-pilule--contour:hover { background: var(--nuit); color: var(--lait); }
.bouton-pilule--citron { background: var(--citron); color: var(--canard-texte); font-size: 24px; padding: 18px 48px; }
.bouton-pilule--citron:hover { background: var(--emeraude); color: var(--nuit); }
.bouton-pilule--celeste { background: var(--celeste); color: var(--lait); font-weight: 400; font-size: 16px; padding: 12px 32px; }
.bouton-pilule--celeste:hover { background: var(--canard); color: var(--lait); }

/* Domaines d'expertise */
.domaine { padding: 40px 16px 64px; scroll-margin-top: 16px; }
.domaine__interieur { max-width: 1020px; margin-inline: auto; }
.domaine__titre { text-align: center; font-size: 36px; max-width: 22em; margin: 0 auto 60px; }
.domaine__accroche { font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 32px; }
.domaine__texte { margin-bottom: 40px; }
.fond-lait { background: var(--lait); }
.fond-lait .domaine__titre { color: var(--nuit); }
.fond-lait .domaine__accroche { color: var(--gris-texte); }
.fond-lait .domaine__texte { color: var(--taupe); }
.fond-minuit { background: var(--minuit); color: var(--lait); }
.fond-canard { background: var(--canard); color: var(--lait); }
.fond-nuit { background: var(--nuit); color: var(--lait); }
.fond-tiffany { background: var(--tiffany); color: var(--lait); }
.fond-minuit a, .fond-canard a { color: var(--lait); }
.encadres { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
@media (max-width: 700px) { .encadres { grid-template-columns: 1fr; gap: 16px; } }
.encadre { min-height: 130px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 28px; font-weight: 700; font-size: 22px; line-height: 1.3; }
.encadre--lavande { background: var(--lavande); color: var(--lait); }
.encadre--minuit { background: var(--minuit); color: var(--lait); }
.encadre--nuit { background: var(--nuit); color: var(--lait); }
.encadre--lait { background: var(--lait); color: var(--gris-texte); }
.encadre--celeste { background: var(--celeste); color: var(--lait); }
.encadre--tiffany { background: var(--tiffany); color: var(--lait); }
.encadre--taupe { background: var(--taupe); color: var(--lait); }
.encadre:nth-last-child(-n+2) { min-height: 170px; }

/* ADN */
.adn { padding-top: 60px; padding-bottom: 40px; }
.titre-nuit { color: var(--nuit); font-size: 36px; }
.adn__portrait { width: 400px; margin: 10px 0 24px; }
.adn__nom { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 12px; }
.adn__linkedin { color: var(--canard); display: inline-flex; }
.adn__texte { max-width: 946px; font-size: 18px; margin-bottom: 48px; }
.adn__fonction { font-weight: 700; margin-bottom: 0.2em; }
.adn__fonction:last-of-type { margin-bottom: 1.2em; }
.valeurs { list-style: none; margin: 16px 0 56px; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.valeur { width: 249px; height: 249px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: var(--lait); }
.valeur.fond-nuit { background: var(--nuit); }
.valeur.fond-minuit { background: var(--minuit); }
.valeur.fond-canard { background: var(--canard); }
@media (max-width: 860px) { .valeurs { justify-content: center; } }
.engagement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px; margin-top: 16px; }
@media (max-width: 860px) { .engagement { grid-template-columns: 1fr; gap: 24px; } }
.engagement__bloc { min-height: 440px; padding: 28px 36px; text-align: center; }
.engagement__bloc h3 { font-size: 30px; color: var(--lait); margin-bottom: 28px; }
.engagement__bloc ul { list-style: none; margin: 0; padding: 0; font-size: 22px; line-height: 1.3; }
.engagement__bloc li { margin-bottom: 1.2em; }

/* Formation */
.formation-intro { text-align: center; padding: 40px 16px 24px; max-width: 1125px; margin-inline: auto; }
.formation-intro h1 { color: var(--taupe); font-size: 30px; }
.formation-intro__texte { color: var(--taupe); font-weight: 700; font-size: 16px; }
.catalogue { padding: 24px 0 64px; }
.catalogue--fonce { background: var(--minuit); }
.catalogue__titre { font-size: 36px; }
.catalogue--clair .catalogue__titre { color: var(--nuit); }
.catalogue--fonce .catalogue__titre { color: var(--lait); font-size: 48px; text-align: center; }
.fiches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 69px 12px; }
@media (max-width: 960px) { .fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
@media (max-width: 620px) { .fiches { grid-template-columns: 1fr; } }
.fiche { min-height: 280px; padding: 40px 28px 32px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.catalogue--clair .fiche { background: var(--minuit); color: var(--lait); }
.catalogue--fonce .fiche { background: var(--lait); color: var(--anthracite); }
.fiche__titre { align-self: stretch; font-weight: 700; font-size: 22px; line-height: 1.3; margin: 0; }
.fiche__surtitre, .fiche__sous-titre { display: block; }
.fiche__statut { font-size: 16px; margin: 0; }
.bouton-pilule--fiche { font-weight: 400; font-size: 16px; padding: 12px 40px; margin-top: 24px; }
.catalogue--clair .bouton-pilule--fiche { border: 1px solid var(--lait); color: var(--lait); }
.catalogue--clair .bouton-pilule--fiche:hover { background: var(--lait); color: var(--minuit); }
.catalogue--fonce .bouton-pilule--fiche { border: 1px solid var(--nuit); color: var(--nuit); }
.catalogue--fonce .bouton-pilule--fiche:hover { background: var(--nuit); color: var(--lait); }

/* Article */
.article { max-width: 1060px; margin-inline: auto; padding: 48px 16px 24px; }
.article__tete { text-align: center; margin-bottom: 32px; }
.article__tete h1 { color: var(--anthracite); font-size: 32px; max-width: 26em; margin-inline: auto; }
.article__auteur, .article__date { font-size: 14px; color: var(--gris-texte); margin: 0 0 4px; }
.article__image { margin: 0 0 40px; }
.article__image img { width: 100%; max-height: 420px; object-fit: cover; }
.article__corps { max-width: 1000px; }
.texte h2 { margin-top: 1.4em; font-size: 26px; }
.texte h3 { margin-top: 1.2em; font-size: 22px; }
.texte li { margin-bottom: 0.35em; }
.suite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 32px 0 48px; border-top: 1px solid var(--argile); margin-top: 32px; }
@media (max-width: 640px) { .suite { grid-template-columns: 1fr; } }
.suite__lien { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--nuit); font-weight: 700; line-height: 1.3; }
.suite__lien span { color: var(--gris-texte); font-weight: 400; font-size: 14px; }
.suite__lien--droite { text-align: right; }
.suite__lien:hover { text-decoration: underline; }

/* Pages simples (politique de confidentialité, page introuvable) */
.page-simple { max-width: 1000px; margin-inline: auto; padding: 48px 16px 64px; }
.page-simple h1 { color: var(--nuit); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; padding-top: 50px; padding-bottom: 64px; align-items: start; }
.contact__texte h1 { color: var(--taupe); font-size: 48px; }
.contact__texte { color: var(--gris-texte); }
.contact__image { grid-column: 1 / -1; width: 100%; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }

/* Pied de page */
.pied { background: var(--nuit); color: var(--lait); padding: 40px 16px 48px; }
.pied__interieur { max-width: 1340px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .pied__interieur { grid-template-columns: 1fr; } }
.pied a { color: var(--lait); }
.pied__nom { font-size: 32px; font-weight: 700; margin: 0; }
.pied__droits { font-size: 14px; font-weight: 700; }
.pied__coordonnees { display: flex; flex-direction: column; gap: 6px; font-size: 24px; }
.pied__coordonnees a { text-decoration: none; }
.pied__coordonnees a:hover { text-decoration: underline; }
.pied__linkedin { margin-top: 6px; }
.pied__ecrire p { font-weight: 700; margin-bottom: 12px; }

/* Petits écrans */
@media (max-width: 640px) {
  h1, .bande__titre, .titre-nuit, .domaine__titre, .catalogue__titre { font-size: 28px; }
  .catalogue--fonce .catalogue__titre { font-size: 34px; }
  .domaines-ronds__titre, .domaine__accroche, .formation-intro h1 { font-size: 24px; }
  .contact__texte h1 { font-size: 36px; }
  .entete__interieur { padding: 12px 16px; }
  .barre-contact__tel { white-space: nowrap; }
  .adn__portrait { width: 100%; max-width: 400px; }
  .pied__coordonnees { font-size: 20px; }
}