/* ==========================================================================
   awc.css - ce qui est PROPRE A Audit web cyber, charge APRES le design system DATIVO (ds/).
   ==========================================================================
   Brief de G du 04/11/2026, sur le modele de cra.css. Le design system vit dans ds/, copie sans retouche
   du depot de RGPD Facile ; il fait foi pour la mise en page, les composants, les tailles et les espacements.
   Ce fichier ne porte que :
     1. les polices, servies par l'application (aucune requete vers un tiers) ;
     2. les exceptions de G : aucun vert plus fonce que l'Emerald 700 (ni #1F3D33 ni Emerald 800 et 900),
        titres et surfaces foncees en Emerald 700, texte courant en gris 700 ; aucune cesure ;
     3. les couples du design system ramenes a 4,5:1 (liens du pied, alertes), signales a G ;
     4. les composants propres a AWC, aux seuls jetons du design system ou aux jetons --awc-* ci-dessous.
   REGLES : aucune couleur en dur hors des declarations --awc-* de :root (bin/contraste-navigateur.mjs mesure
   le rendu, temoin compris). Pas de largeur maximale sur un bloc de texte : il prend son conteneur.
   ========================================================================== */

/* --- 1. POLICES : les familles du design system, en woff2 variables servis par le site ---------------- */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
             src: url('/assets/polices/bricolage.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
             src: url('/assets/polices/dmsans.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap;
             src: url('/assets/polices/dmsans-italic.woff2') format('woff2'); }

/* --- 2. LES EXCEPTIONS DE G --------------------------------------------------------------------------- */
:root {
  /* L'encre du design system (Forest #1F3D33, banni : il s'imprime en noir) devient l'Emerald 700 (#37664D,
     blanc dessus 6,6:1). Les crans 800 et 900, plus fonces encore, sont ramenes au 700 : survol et clic des
     boutons compris, aucun vert plus fonce ne peut s'afficher. */
  --color-forest: var(--color-emerald-700);
  --forest: var(--color-emerald-700);
  --color-emerald-800: var(--color-emerald-700);
  --color-emerald-900: var(--color-emerald-700);
  --emerald-800: var(--color-emerald-700);
  --emerald-900: var(--color-emerald-700);
  --color-primary-active: var(--color-emerald-700);
  --primary-active: var(--color-emerald-700);
  --emerald-active: var(--color-emerald-700);
  --dv-color-forest: var(--color-emerald-700);
  --dv-color-emerald-800: var(--color-emerald-700);
  --dv-color-emerald-900: var(--color-emerald-700);
  --dv-color-emerald-active: var(--color-emerald-700);
  --dv-color-primary-active: var(--color-emerald-700);
  --dv-text-link-hover: var(--color-emerald-700);
  --dv-avatar-bg-1: var(--color-emerald-700);
  /* Le texte courant prend le gris 700 du design system, comme les paragraphes de rgpdfacile.fr. */
  --text-primary: var(--color-gray-700);
  --dv-text-primary: var(--color-gray-700);

  /* Les seuls jetons propres a AWC. Les couleurs litterales sont celles que le design system emploie deja
     dans ses badges (dativo.css, section 9), reprises sous un nom pour ses alertes. */
  --awc-info-texte: #1E3A8A;          /* .badge--info : 8,6:1 sur le fond de .alert--info */
  --awc-alerte-texte: #78350F;        /* .badge--alert : 7,4:1 sur le fond de .alert--warning */
  --awc-filet: 1px;
  --awc-filet-epais: 2px;
  --awc-cible-tactile: 44px;
  --awc-champ-domaine: 22rem;         /* la largeur minimale du champ du domaine, avant son bouton */
  --awc-chiffre: 2.5rem;              /* le taux d'une section, dans la synthese */
  --awc-pastille: 2rem;               /* la pastille numerotee d'une etape */
}

body {
  color: var(--color-gray-700);
  background-color: var(--color-cream);   /* fond de page continu, les sections en panneaux arrondis */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}
a, a:visited { color: var(--color-emerald-600); }   /* 5,1:1 sur la creme, 5,5:1 sur le blanc */
a:hover { color: var(--color-emerald-700); }
strong { color: var(--color-gray-800); }

/* --- 3. COUPLES DU DESIGN SYSTEM RAMENES A 4,5:1 (signales a G) ---------------------------------------- */
.footer__link, .footer__link:visited, .footer a, .footer a:visited { color: var(--color-white); }   /* blanc a 70 % : 4,2:1 sur l'Emerald 700 */
.alert--info { color: var(--awc-info-texte); }        /* #2563EB sur #DBEAFE : 3,4:1 */
.alert--warning { color: var(--awc-alerte-texte); }   /* #D97706 sur #FED7AA : 2,3:1 */
.alert--success { color: var(--color-emerald-700); background-color: var(--color-dew); border-color: var(--color-mint); }   /* texte #065F46, plus fonce que l'Emerald 700 */
.badge--success { color: var(--color-emerald-700); background-color: var(--color-dew); }            /* texte #064E3B, idem */
.alert a, .alert a:visited { color: inherit; font-weight: 600; }
.footer__copyright { opacity: 1; }                    /* opacite 0,6 du design system : 2,8:1 sur l'Emerald 700 */
code { color: var(--color-emerald-700); }             /* Emerald 500 sur dew : 3,9:1 */

/* --- 4. COMPOSANTS PROPRES A AWC ------------------------------------------------------------------------ */

/* La page : l'en-tete du design system, puis des panneaux blancs arrondis dans le conteneur. */
.awc-main { padding-top: var(--space-10); padding-bottom: var(--space-16); }
.awc-panneau {
  background-color: var(--bg-card);
  border: var(--awc-filet) solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-10);
  margin-bottom: var(--space-8);
}
.awc-panneau > :last-child { margin-bottom: 0; }
.awc-panneau h1, .awc-panneau .h1 { font-size: 2.25rem; }
.awc-panneau h2 { font-size: 1.75rem; }
.awc-chapeau { font-size: 1.125rem; color: var(--text-secondary); }
.awc-aide { font-size: 0.875rem; color: var(--color-gray-600); }
@media (max-width: 640px) {
  .awc-main { padding-top: var(--space-6); }
  .awc-panneau { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); }
  .awc-panneau h1, .awc-panneau .h1 { font-size: 1.75rem; }
  .awc-panneau h2 { font-size: 1.375rem; }
}

/* Le haut de l'accueil : la couverture, dans un panneau au degrade du design system (.bg-mesh-hero). */
.awc-couverture { position: relative; overflow: hidden; padding: var(--space-16) var(--space-12); }
.awc-couverture .hero__title { font-size: 3rem; }
@media (max-width: 1024px) { .awc-couverture .hero__title { font-size: 2.25rem; } }
@media (max-width: 640px) { .awc-couverture { padding: var(--space-8) var(--space-5); } .awc-couverture .hero__title { font-size: 1.875rem; } }

/* Le formulaire du domaine : le champ, puis son bouton, sur une ligne quand la place le permet. */
.awc-domaine { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-4); }
.awc-domaine .form-group { flex: 1 1 var(--awc-champ-domaine); margin-bottom: 0; }
.awc-domaine .btn { min-height: var(--awc-cible-tactile); }
.awc-prix { font-size: 1rem; color: var(--color-gray-700); margin-bottom: 0; }
.awc-prix strong { color: var(--color-emerald-700); font-family: var(--font-display); font-size: 1.25rem; }

/* Les cartes de meme rang (les trois regards, les offres) : la grille du design system, cartes de meme hauteur. */
.awc-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.awc-cartes--quatre { grid-template-columns: repeat(4, 1fr); }
.awc-cartes--deux { grid-template-columns: repeat(2, 1fr); }
.awc-cartes .feature-card { height: 100%; }
.awc-cartes .feature-card__text { margin-bottom: 0; color: var(--color-gray-700); }
@media (max-width: 1024px) { .awc-cartes, .awc-cartes--quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .awc-cartes, .awc-cartes--quatre, .awc-cartes--deux { grid-template-columns: 1fr; } }

/* Une sequence (comment ca marche, l'avancement d'un audit) : pastilles numerotees. */
.awc-etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.awc-etapes li { display: flex; gap: var(--space-4); align-items: flex-start; }
.awc-etapes__num {
  flex: 0 0 var(--awc-pastille); height: var(--awc-pastille); border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--color-dew); color: var(--color-emerald-700); font-weight: 700; font-family: var(--font-display);
}
.awc-etapes li[aria-current="step"] .awc-etapes__num { background-color: var(--color-emerald-700); color: var(--color-white); }
.awc-etapes li.awc-etapes--fait .awc-etapes__num { background-color: var(--color-emerald-500); color: var(--color-white); }
.awc-etapes__titre { display: block; font-weight: 600; color: var(--color-gray-800); }

/* La synthese d'un audit : un chiffre par section. */
.awc-jauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-5); }
.awc-jauge { border: var(--awc-filet) solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-5); background-color: var(--color-white); }
.awc-jauge__nom { font-size: 0.875rem; font-weight: 600; color: var(--color-gray-700); margin-bottom: var(--space-2); }
.awc-jauge__valeur { font-family: var(--font-display); font-size: var(--awc-chiffre); font-weight: 700; line-height: 1.1; color: var(--color-emerald-700); margin-bottom: var(--space-2); }
.awc-jauge__detail { font-size: 0.875rem; color: var(--color-gray-600); margin-bottom: 0; }
@media (max-width: 640px) { .awc-jauges { grid-template-columns: 1fr; } }

/* Un constat du detail (ecart d'une section). */
.awc-constat { border: var(--awc-filet) solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); background-color: var(--color-white); }
.awc-constat__titre { font-weight: 600; color: var(--color-gray-800); margin-bottom: var(--space-2); }
.awc-constat p:last-child { margin-bottom: 0; }
.badge--neutre { background-color: var(--color-gray-100); color: var(--color-gray-700); }

/* Les tableaux de l'espace client : la ligne entiere mene a l'action principale (lien etendu). */
.awc-tableau td a.awc-ligne, .awc-tableau td a.awc-ligne:visited { color: var(--color-emerald-700); font-weight: 600; }
.awc-tableau tr.awc-ligne-cliquable { position: relative; }
.awc-tableau tr.awc-ligne-cliquable a.awc-ligne::after { content: ''; position: absolute; inset: 0; }
.awc-tableau tr.awc-ligne-cliquable:hover td { background-color: var(--color-gray-50); }
.awc-tableau tr.awc-ligne-cliquable td a:not(.awc-ligne) { position: relative; z-index: 1; }   /* les liens secondaires d'une cellule restent des liens */
/* Sur petit écran, chaque ligne s'empile : une cellule par ligne, précédée de l'intitulé de sa colonne (data-label). */
@media (max-width: 640px) {
  .awc-tableau thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .awc-tableau, .awc-tableau tbody, .awc-tableau tr, .awc-tableau td { display: block; }
  .awc-tableau tr { padding-block: var(--space-2); border-bottom: var(--awc-filet) solid var(--color-gray-200); }
  .awc-tableau tr:last-child { border-bottom: none; }
  .awc-tableau td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-1) var(--space-4); border-bottom: none; text-align: right; }
  .awc-tableau td::before { content: attr(data-label); flex-shrink: 0; font-weight: 600; color: var(--color-gray-700); text-align: left; }
}
.awc-domaine-titre { font-size: 1.25rem; margin-top: var(--space-6); }

/* Les formulaires du site : les champs du design system, la case des CGV. */
.awc-formulaire .form-group { margin-bottom: var(--space-5); }
.awc-formulaire .form-check { align-items: flex-start; }
.awc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }

/* Les pages de texte (mentions, confidentialite, CGV) : la prose prend la largeur du panneau. */
.awc-prose h2 { margin-top: var(--space-8); }
.awc-prose h2:first-child { margin-top: 0; }

/* Un texte nouveau, en attente de relecture par G (Cowork) : le marqueur se voit, il ne se devine pas. */
.a-valider {
  display: inline-block; margin-right: var(--space-2); padding: 0 var(--space-2);
  border: var(--awc-filet) dashed var(--color-terra); border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-gray-800); background-color: var(--color-white);
  vertical-align: middle;
}

/* Sous 1024 px, le design system masque liens et connexion et montre le hamburger : ici un <details> natif,
   sans script. La barre porte un backdrop-filter, qui fait d'elle le bloc conteneur du menu fixe : hauteur posée. */
.awc-nav-mobile { display: none; }
@media (max-width: 1024px) { .awc-nav-mobile { display: block; } }
.awc-nav-mobile > summary { list-style: none; }
.awc-nav-mobile > summary::-webkit-details-marker { display: none; }
.awc-nav-mobile[open] > .nav__mobile-menu { display: flex; bottom: auto; height: calc(100dvh - var(--nav-height)); }
.awc-nav-mobile[open] > .nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.awc-nav-mobile[open] > .nav__hamburger span:nth-child(2) { opacity: 0; }
.awc-nav-mobile[open] > .nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile-menu .btn { margin-top: var(--space-4); }

/* L'en-tete : le nom de l'offre a cote du logo DATIVO. */
.nav__logo img { height: 32px; width: auto; }
.awc-nom-offre { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--color-emerald-700); padding-left: var(--space-3); border-left: var(--awc-filet) solid var(--color-gray-200); }
.nav__auth .btn { min-height: var(--awc-cible-tactile); }
@media (max-width: 640px) { .awc-nom-offre { display: none; } .nav__auth .nav__signin { padding: 6px 4px; } .nav__auth .btn { padding: 0.6rem 0.9rem; } }

/* Le pied : les colonnes du design system ; la mention de l'editeur, obligatoire, en bas. */
.footer__bottom { flex-wrap: wrap; gap: var(--space-3); }
/* Le logo sur la pastille blanche : la declinaison claire se lit mal sur l'Emerald 700. */
.footer__logo { display: inline-flex; background-color: var(--color-white); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.awc-logo-pied { height: 28px; width: auto; }

/* La connexion : le gabarit .dv-auth ; le logo en blanc sur le panneau Emerald 700. */
.dv-auth__brand a, .dv-auth__brand a:visited { color: var(--color-white); }
/* Le titre de la carte : la taille que le design system donne a .dv-auth__head h2 (le h1 de la page le porte ici). */
.dv-auth__head h1 { margin: 0 0 6px; font-family: var(--dv-font-title); font-size: 1.625rem; font-weight: var(--dv-weight-semibold); }
.dv-auth__coches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); color: var(--color-white); }
.dv-auth__coches li { display: flex; gap: var(--space-3); align-items: flex-start; }
.dv-auth__coche { flex: 0 0 1.25rem; height: 1.25rem; color: var(--color-mint); margin-top: 0.15rem; }
.dv-auth__legal { margin-top: var(--space-5); text-align: center; font-size: 0.875rem; color: var(--color-gray-600); }
.dv-auth__legal a, .dv-auth__legal a:visited { color: var(--color-gray-700); }
@media (min-width: 901px) { .dv-auth__legal { display: none; } }
@media (max-width: 900px) { .dv-auth__brand { display: none; } }