/*
Theme Name: Cautus Assurances
Theme URI: https://cautus.fr
Author: Cautus Assurances
Description: Thème sur mesure pour un cabinet de courtage en assurances à Cayenne. Catalogue de garanties piloté par un fichier de données, formulaires Jotform intégrés, polices auto-hébergées, données structurées InsuranceAgency.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cautus
*/

/* =========================================================================
   1. Polices auto-hébergées
   Déposez les .woff2 dans assets/fonts/. Tant qu'ils sont absents, les
   familles de repli s'appliquent et le site reste correct.
   ========================================================================= */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("assets/fonts/BricolageGrotesque.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("assets/fonts/SourceSerif4.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("assets/fonts/SourceSerif4-Italic.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-display: swap;
	font-style: italic;
}

/* =========================================================================
   2. Jetons
   ========================================================================= */

:root {
	--encre:        #12261e;
	--encre-doux:   #435449;
	--vert:         #1d5c4a;
	--vert-clair:   #2e7a63;
	--or:           #e8a317;
	--or-sombre:    #a8730a;
	--papier:       #eef0ea;
	--papier-fonce: #e2e6dc;
	--blanc:        #ffffff;
	--trait:        #d1d7ca;

	--titre: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	--texte: "Source Serif 4", Georgia, "Times New Roman", serif;

	--t-xs:  0.8125rem;
	--t-s:   0.9375rem;
	--t-b:   1.0625rem;
	--t-m:   1.3125rem;
	--t-l:   1.75rem;
	--t-xl:  2.375rem;

	--e1: 0.25rem;
	--e2: 0.5rem;
	--e3: 0.75rem;
	--e4: 1rem;
	--e5: 1.5rem;
	--e6: 2rem;
	--e7: 3rem;
	--e8: 4rem;
	--e9: 6rem;

	--gouttiere: 2.5rem;
	--largeur: 68rem;
	--mesure:  36rem;
}

/* =========================================================================
   3. Base
   ========================================================================= */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--encre);
	font-family: var(--texte);
	font-size: var(--t-b);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--titre);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 var(--e4);
	text-wrap: balance;
}

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--vert); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--or-sombre); }

:focus-visible {
	outline: 3px solid var(--or);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.evite {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--encre);
	color: var(--papier);
	padding: var(--e3) var(--e4);
	z-index: 100;
}
.evite:focus { left: var(--e4); top: var(--e4); }

.enveloppe {
	width: min(100% - var(--gouttiere), var(--largeur));
	margin-inline: auto;
}

.mesure { max-width: var(--mesure); }

/* =========================================================================
   4. En-tête
   ========================================================================= */

.entete {
	background: var(--encre);
	color: var(--papier);
}

.entete a { color: inherit; }

.entete__haut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e5);
	padding-block: var(--e4);
	flex-wrap: wrap;
}

.marque {
	display: flex;
	align-items: center;
	gap: var(--e4);
	text-decoration: none;
	line-height: 1.1;
}

/* Hauteur du logo. C'est la seule valeur à changer pour l'agrandir
   ou le réduire ; la largeur suit automatiquement. */
.marque__logo {
	height: 110px;
	width: auto;
	flex-shrink: 0;
}

.marque__texte { display: block; }
.marque__nom {
	display: block;
	font-family: var(--titre);
	font-weight: 700;
	font-size: var(--t-m);
	letter-spacing: -0.02em;
}
.marque__accroche {
	display: block;
	font-style: italic;
	font-size: var(--t-s);
	color: var(--or);
	margin-top: 2px;
}


.entete__tel {
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-m);
	text-decoration: none;
	white-space: nowrap;
}
.entete__tel:hover { color: var(--or); }

/* Navigation */

.nav-principale {
	border-top: 1px solid rgba(238, 240, 234, 0.18);
}
.nav-principale ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.nav-principale a {
	display: block;
	padding: var(--e3) var(--e4);
	font-family: var(--titre);
	font-weight: 500;
	font-size: var(--t-s);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.nav-principale a:hover,
.nav-principale .current-menu-item > a,
.nav-principale .current_page_item > a {
	border-bottom-color: var(--or);
	color: var(--blanc);
}
.nav-principale li:first-child a { padding-left: 0; }

/* =========================================================================
   5. Hero
   ========================================================================= */

.hero {
	background: var(--encre);
	color: var(--papier);
	padding-block: var(--e8) var(--e9);
	position: relative;
}

.hero__titre {
	font-size: clamp(2.25rem, 7vw, 4.25rem);
	max-width: 16ch;
	margin-bottom: var(--e5);
}

.hero__texte {
	max-width: 46ch;
	font-size: var(--t-m);
	color: #cdd6cc;
}

.hero__signature {
	margin-top: var(--e6);
	padding-top: var(--e4);
	border-top: 2px solid var(--or);
	display: inline-block;
	font-style: italic;
	font-size: var(--t-m);
	color: var(--or);
}

/* =========================================================================
   6. Les deux portes
   ========================================================================= */

.portes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 2px;
	background: var(--trait);
	width: min(100% - var(--gouttiere), var(--largeur));
	margin-inline: auto;
	border: 1px solid var(--trait);
}

.porte {
	display: block;
	padding: var(--e7) var(--e5) var(--e6);
	background: var(--blanc);
	text-decoration: none;
	color: var(--encre);
	transition: background 0.18s ease;
}
.porte:hover,
.porte:focus-visible {
	background: var(--vert);
	color: var(--papier);
}

.porte__titre {
	display: block;
	font-family: var(--titre);
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	letter-spacing: -0.02em;
	margin-bottom: var(--e3);
}
.porte__texte {
	display: block;
	max-width: 32ch;
	color: var(--encre-doux);
	margin-bottom: var(--e5);
}
.porte:hover .porte__texte,
.porte:focus-visible .porte__texte { color: #cdd6cc; }

.porte__action {
	display: inline-block;
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-s);
	padding-bottom: 3px;
	border-bottom: 2px solid var(--or);
}

/* =========================================================================
   7. Sections
   ========================================================================= */

.section { padding-block: var(--e8); }
.section--serre { padding-block: var(--e7); }
.section--blanche { background: var(--blanc); }
.section--sombre { background: var(--encre); color: var(--papier); }
.section--sombre a { color: var(--or); }

.section__titre {
	font-size: var(--t-xl);
	max-width: 20ch;
}

.section__chapeau {
	max-width: var(--mesure);
	font-size: var(--t-m);
	color: var(--encre-doux);
}
.section--sombre .section__chapeau { color: #cdd6cc; }

/* =========================================================================
   8. Étapes (véritable séquence : la numérotation est de l'information)
   ========================================================================= */

.etapes {
	list-style: none;
	margin: var(--e6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--e5);
	counter-reset: etape;
}

.etape {
	counter-increment: etape;
	padding-top: var(--e4);
	border-top: 1px solid var(--trait);
}
.section--sombre .etape { border-top-color: rgba(238, 240, 234, 0.25); }

.etape::before {
	content: counter(etape);
	display: block;
	font-family: var(--titre);
	font-weight: 700;
	font-size: var(--t-l);
	color: var(--or);
	line-height: 1;
	margin-bottom: var(--e3);
}

.etape__titre {
	font-size: var(--t-m);
	margin-bottom: var(--e2);
}
.etape p { color: var(--encre-doux); font-size: var(--t-s); }
.section--sombre .etape p { color: #cdd6cc; }

/* =========================================================================
   9. Catalogue des garanties
   ========================================================================= */

.rubrique { margin-bottom: var(--e8); }
.rubrique:last-child { margin-bottom: 0; }

.rubrique__entete {
	border-bottom: 2px solid var(--encre);
	padding-bottom: var(--e3);
	margin-bottom: var(--e5);
}
.rubrique__titre { font-size: var(--t-l); margin-bottom: var(--e1); }
.rubrique__intro { color: var(--encre-doux); font-size: var(--t-s); margin: 0; }

.offres {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1px;
	background: transparent;
}

/* Le filet est porté par chaque carte, pas par la grille : les cases
   laissées vides en fin de rangée restent donc transparentes. */
.offre {
	display: grid;
	background: var(--blanc);
	box-shadow: 0 0 0 1px var(--trait);
}

.offre__lien {
	display: grid;
	gap: var(--e2);
	padding: var(--e5);
	text-decoration: none;
	color: var(--encre);
	border-left: 4px solid transparent;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.offre__lien:hover,
.offre__lien:focus-visible {
	background: var(--papier);
	border-left-color: var(--vert);
	color: var(--encre);
}
.offre--devis .offre__lien { border-left-color: var(--or); }
.offre--devis .offre__lien:hover,
.offre--devis .offre__lien:focus-visible { border-left-color: var(--or-sombre); }

.offre__nom {
	font-family: var(--titre);
	font-weight: 700;
	font-size: var(--t-m);
	line-height: 1.2;
}
.offre__desc {
	color: var(--encre-doux);
	font-size: var(--t-s);
	max-width: 38ch;
}
.offre__action {
	margin-top: var(--e2);
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-xs);
	color: var(--vert);
	align-self: end;
}
.offre--devis .offre__action { color: var(--or-sombre); }

/* =========================================================================
   10. Contact rapide
   ========================================================================= */

.contact-rapide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--e5);
}

.contact-rapide__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--e3);
	border-top: 2px solid var(--or);
}

.contact-rapide__label {
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-xs);
	color: var(--encre-doux);
	margin-bottom: var(--e1);
}
.contact-rapide--sombre .contact-rapide__label { color: #a9b5a8; }

.contact-rapide__valeur {
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-m);
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
}
.contact-rapide__valeur--petit { font-size: var(--t-s); font-weight: 500; }
a.contact-rapide__valeur:hover { color: var(--or); }

.contact-rapide__secondaire {
	font-size: var(--t-s);
	color: var(--encre-doux);
}
.contact-rapide--sombre .contact-rapide__secondaire { color: #a9b5a8; }
a.contact-rapide__secondaire { color: var(--vert); }
.contact-rapide--sombre a.contact-rapide__secondaire { color: var(--or); }

/* =========================================================================
   11. Boutons
   ========================================================================= */

.bouton {
	display: inline-block;
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-s);
	padding: var(--e3) var(--e5);
	background: var(--or);
	color: var(--encre);
	text-decoration: none;
	border: 2px solid var(--or);
	transition: background 0.15s ease, color 0.15s ease;
}
.bouton:hover { background: transparent; color: var(--or); }

.bouton--ligne {
	background: transparent;
	color: var(--encre);
	border-color: var(--encre);
}
.bouton--ligne:hover { background: var(--encre); color: var(--papier); }

.section--sombre .bouton--ligne { color: var(--papier); border-color: var(--papier); }
.section--sombre .bouton--ligne:hover { background: var(--papier); color: var(--encre); }

/* =========================================================================
   12. Contenu éditorial (pages WordPress)
   ========================================================================= */

.ariane {
	font-size: var(--t-xs);
	color: var(--encre-doux);
	padding-block: var(--e4);
	display: flex;
	gap: var(--e2);
	align-items: center;
}

.page-titre {
	font-size: var(--t-xl);
	max-width: 22ch;
	margin-bottom: var(--e4);
}

.prose { max-width: var(--mesure); }
.prose h2 { font-size: var(--t-l); margin-top: var(--e7); }
.prose h3 { font-size: var(--t-m); margin-top: var(--e5); }
.prose ul, .prose ol { padding-left: 1.25em; margin-bottom: var(--e4); }
.prose li { margin-bottom: var(--e2); }
.prose blockquote {
	margin: var(--e5) 0;
	padding-left: var(--e4);
	border-left: 3px solid var(--or);
	font-style: italic;
}
.prose iframe,
.prose embed,
.prose object { max-width: 100%; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--e5); }
.prose .tableau-defilant { overflow-x: auto; }
.prose th, .prose td {
	text-align: left;
	padding: var(--e3);
	border-bottom: 1px solid var(--trait);
	font-size: var(--t-s);
}

.legal { max-width: 44rem; }
.legal dl { margin: 0 0 var(--e5); }
.legal dt {
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-s);
	color: var(--encre-doux);
	margin-top: var(--e4);
}
.legal dd { margin: 0; }

.a-completer {
	background: #fdf3d8;
	border-left: 3px solid var(--or);
	padding: 2px 6px;
	font-family: var(--titre);
	font-size: var(--t-s);
}

/* =========================================================================
   13. Pied de page
   ========================================================================= */

.pied {
	background: var(--encre);
	color: var(--papier);
	padding-block: var(--e8) var(--e6);
	margin-top: auto;
}
.pied a { color: var(--papier); }
.pied a:hover { color: var(--or); }

.pied__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--e6);
	padding-bottom: var(--e6);
	border-bottom: 1px solid rgba(238, 240, 234, 0.2);
}

.pied__titre {
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-xs);
	color: var(--or);
	margin-bottom: var(--e3);
}

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: var(--e2); font-size: var(--t-s); }

.pied__adresse { font-style: normal; font-size: var(--t-s); line-height: 1.7; }

.pied__bas {
	padding-top: var(--e5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--e4);
	justify-content: space-between;
	font-size: var(--t-xs);
	color: #a9b5a8;
}

.pied__orias {
	font-family: var(--titre);
	font-size: var(--t-xs);
	color: #a9b5a8;
	line-height: 1.6;
}

/* =========================================================================
   14. Barre d'action mobile
   ========================================================================= */

.barre-action {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 50;
	display: none;
	background: var(--encre);
	border-top: 2px solid var(--or);
}
.barre-action a {
	flex: 1;
	padding: var(--e3) var(--e2);
	text-align: center;
	font-family: var(--titre);
	font-weight: 600;
	font-size: var(--t-s);
	color: var(--papier);
	text-decoration: none;
}
.barre-action a + a { border-left: 1px solid rgba(238, 240, 234, 0.2); }

/* --- Tablette et petit portable (jusqu'à 64rem / ~1024px) --------------- */
@media (max-width: 64rem) {
	:root { --gouttiere: 2rem; }
	.hero { padding-block: var(--e7) var(--e8); }
	.section { padding-block: var(--e7); }
	.porte { padding: var(--e6) var(--e5); }
	.rubrique { margin-bottom: var(--e7); }
	/* Le pied de page passe de quatre colonnes à deux. */
	.pied__grille { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

/* --- Tablette en portrait et grands mobiles (jusqu'à 48rem / ~768px) ---- */
@media (max-width: 48rem) {
	.entete__haut { gap: var(--e3); }
	.marque__logo { height: 56px; }
	/* La navigation défile horizontalement plutôt que de s'empiler. */
	.nav-principale ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.nav-principale ul::-webkit-scrollbar { display: none; }
	.nav-principale a { white-space: nowrap; }
	.contact-rapide { gap: var(--e4); }
}

/* --- Mobile (jusqu'à 44rem / ~700px) ----------------------------------- */
@media (max-width: 44rem) {
	:root { --gouttiere: 1.75rem; }
	.barre-action { display: flex; }
	/* Réserve la hauteur de la barre d'action, encoche iPhone comprise. */
	body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
	.barre-action a { padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px)); }
	.entete__tel { display: none; }
	.hero { padding-block: var(--e6) var(--e7); }
	.section { padding-block: var(--e6); }
	.porte { padding: var(--e5); }
	.offre__lien { padding: var(--e4); }
	.offres { grid-template-columns: 1fr; }
	.etapes { gap: var(--e4); }
	.pied { padding-block: var(--e7) var(--e5); }
	.pied__grille { gap: var(--e5); }
}

/* --- Très petits écrans (jusqu'à 26rem / ~420px) ------------------------ */
@media (max-width: 26rem) {
	:root { --gouttiere: 1.25rem; }
	.marque { gap: var(--e3); }
	.marque__logo { height: 44px; }
	.marque__nom { font-size: var(--t-b); }
	.offre__nom { font-size: var(--t-b); }
	.contact-rapide__valeur { font-size: var(--t-b); }
}

@media print {
	.entete, .pied, .barre-action, .portes { display: none; }
	body { background: #fff; color: #000; }
}