/* ===================================================================
   Réseau 3ème Loc — habillage du thème
   -------------------------------------------------------------------
   Les couleurs, la police et les tailles sont dans theme.json : elles
   arrivent ici sous forme de variables --wp--preset--*. Ce fichier ne
   fait que poser les formes que theme.json ne sait pas décrire :
   les onglets, le filigrane au palmier, le filet tricolore, la grille
   tarifaire à deux colonnes, les portes d'entrée de l'accueil.
   =================================================================== */

:root {
	--r3l-marine: var(--wp--preset--color--marine, #192041);
	--r3l-ciel:   var(--wp--preset--color--ciel, #6BCEDD);
	--r3l-encre:  var(--wp--preset--color--encre, #231F20);
	--r3l-filet:  var(--wp--preset--color--filet, #DFE2E8);
	--r3l-gris:   var(--wp--preset--color--gris, #6B7280);
	--r3l-rayon:  4px;

	/* Couleur du lieu courant. Par défaut : marine. Une page de lieu la
	   remplace par sa couleur (voir .est-verriere / .est-spot /
	   .est-mezzanine plus bas). */
	--r3l-couleur: var(--r3l-marine);
}

.est-verriere  { --r3l-couleur: var(--wp--preset--color--verriere, #00AEAE); }
.est-spot      { --r3l-couleur: var(--wp--preset--color--spot, #ED1A59); }
.est-mezzanine { --r3l-couleur: var(--wp--preset--color--mezzanine, #9B932F); }

/* --- 1. Onglets ---------------------------------------------------- */

/* Sans JavaScript : chaque panneau reste une section ordinaire, visible,
   les unes sous les autres. La page se lit en entier. */
.is-style-r3loc-panneau {
	padding-block: var(--wp--preset--spacing--40, 1.6rem);
	border-top: 1px solid var(--r3l-filet);
}
.is-style-r3loc-panneau:first-of-type { border-top: 0; }

/* Avec JavaScript : la barre apparaît, les titres de section se replient
   dans les onglets, un seul panneau reste affiché. */
.r3loc-onglets-actifs .is-style-r3loc-panneau {
	border-top: 0;
	padding-block-start: var(--wp--preset--spacing--40, 1.6rem);
}

.r3loc-barre-onglets {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2.2rem);
	border-bottom: 2px solid var(--r3l-filet);
	margin-block-end: 0;
}

.r3loc-onglet {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 0 0 0.5rem;
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--intro, 1.2rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--r3l-gris);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}
.r3loc-onglet:hover { color: var(--r3l-encre); }
.r3loc-onglet[aria-selected="true"] {
	color: var(--r3l-couleur);
	border-bottom-color: var(--r3l-couleur);
}
.r3loc-onglet:focus-visible {
	outline: 2px solid var(--r3l-ciel);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Le titre de section sert de libellé d'onglet : on ne l'affiche plus
   dans le panneau, mais il reste lisible par les lecteurs d'écran. */
.r3loc-onglets-actifs .r3loc-titre-replie {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.is-style-r3loc-panneau:focus-visible {
	outline: 2px solid var(--r3l-ciel);
	outline-offset: 4px;
}

/* --- 2. Cartes et blocs sombres ------------------------------------ */

.is-style-r3loc-carte {
	background: var(--wp--preset--color--papier, #fff);
	border-radius: var(--r3l-rayon);
	padding: var(--wp--preset--spacing--40, 1.6rem);
	box-shadow: 0 1px 2px rgba(25, 32, 65, 0.06), 0 8px 24px rgba(25, 32, 65, 0.07);
}

.is-style-r3loc-sombre,
.is-style-r3loc-filigrane {
	position: relative;
	overflow: hidden;
	background: var(--r3l-marine);
	color: #fff;
	border-radius: var(--r3l-rayon);
	padding: var(--wp--preset--spacing--40, 1.6rem);
}
.is-style-r3loc-sombre :is(h1, h2, h3, h4, h5, h6),
.is-style-r3loc-filigrane :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.is-style-r3loc-sombre a,
.is-style-r3loc-filigrane a { color: var(--r3l-ciel); }

/* Le palmier en filigrane, posé en fond. 7,5 % : il se devine, il ne se
   regarde pas. Il est décoratif, donc il ne prend aucune place dans le
   flux et reste invisible à l'impression. */
/* Le « 3 » couché d'un quart de tour : c'est le palmier. */
.is-style-r3loc-filigrane::after{content:"";position:absolute;right:2%;top:12%;bottom:12%;width:auto;max-width:48%;aspect-ratio:104 / 52;background:url("/wp-content/uploads/2026/11/Palmier_motif_nuit.svg") no-repeat right bottom / contain;opacity:.13;pointer-events:none}
.is-style-r3loc-filigrane > * { position: relative; }
.is-style-r3loc-filigrane > *:not(.r3loc-filigrane-fond) { z-index: 1; }

/* --- 3. Titres de la charte ---------------------------------------- */

/* Le filet tricolore : les trois lieux sous le titre. */
.is-style-r3loc-tricolore {
	padding-block-end: 0.45rem;
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(
		to right,
		var(--wp--preset--color--verriere, #00AEAE) 0 33.33%,
		var(--wp--preset--color--mezzanine, #9B932F) 33.33% 66.66%,
		var(--wp--preset--color--spot, #ED1A59) 66.66% 100%
	) 1;
	border-top: 0; border-left: 0; border-right: 0;
}

/* La puce palmier devant un titre de section. */
.is-style-r3loc-puce {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}
.is-style-r3loc-puce::before{content:"";flex:0 0 auto;width:1.15em;height:.6em;background:url("/wp-content/uploads/2026/11/Palmier_motif.svg") no-repeat center / contain;transform:translateY(-.02em)}

/* --- 4. Les portes d'entrée de l'accueil --------------------------- */

/* Le standard téléphonique : des tuiles qui envoient ailleurs, pas une
   page qui se déroule. */
.is-style-r3loc-portes {
	gap: var(--wp--preset--spacing--30, 1rem);
}
.is-style-r3loc-portes > .wp-block-column {
	background: var(--r3l-marine);
	color: #fff;
	border-radius: var(--r3l-rayon);
	/* La couleur du lieu signe la tuile sans la repeindre. */
	border-top: 4px solid var(--r3l-couleur);
	padding: var(--wp--preset--spacing--40, 1.6rem);
	position: relative;
	overflow: hidden;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Une porte « par besoin » n'appartient à aucun lieu : elle prend le ciel. */
.is-style-r3loc-portes > .wp-block-column:not([class*="est-"]) {
	border-top-color: var(--r3l-ciel);
}
.is-style-r3loc-portes > .wp-block-column:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(25, 32, 65, 0.18);
}
.is-style-r3loc-portes > .wp-block-column :is(h2, h3, h4) { color: #fff; }
.is-style-r3loc-portes > .wp-block-column p { color: var(--r3l-ciel); }
.is-style-r3loc-portes > .wp-block-column a {
	color: inherit;
	text-decoration: none;
}
/* Le lien du titre couvre toute la tuile : on clique n'importe où. */
.is-style-r3loc-portes > .wp-block-column :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Photo de fond d'une tuile : on la pose comme image de couverture du
   bloc, le thème se charge du voile qui garde le texte lisible. */
.is-style-r3loc-portes > .wp-block-column.a-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	background-size: cover;
	background-position: center;
	opacity: 0.38;
}
.is-style-r3loc-portes > .wp-block-column > * { position: relative; z-index: 1; }

/* --- 5. Grille tarifaire ------------------------------------------- */

.is-style-r3loc-tarifs table{border-collapse:collapse;width:100%;
 background:var(--wp--preset--color--papier,#fff);border-radius:var(--r3l-rayon);overflow:hidden}
.is-style-r3loc-tarifs :is(th,td){border:0;padding:.7rem .9rem;vertical-align:baseline}
.is-style-r3loc-tarifs thead th{background:var(--r3l-couleur);color:#fff;
 font-size:var(--wp--preset--font-size--mention,.82rem);font-weight:600;letter-spacing:.11em;
 text-transform:uppercase;text-align:right;vertical-align:bottom}
.is-style-r3loc-tarifs thead th:first-child{text-align:left}
.is-style-r3loc-tarifs tbody tr:nth-child(even){background:color-mix(in srgb,var(--r3l-couleur) 7%,#fff)}
.is-style-r3loc-tarifs tbody tr:hover{background:color-mix(in srgb,var(--r3l-couleur) 15%,#fff)}
.is-style-r3loc-tarifs tbody :is(th,td){border-bottom:1px solid color-mix(in srgb,var(--r3l-couleur) 18%,#fff)}
.is-style-r3loc-tarifs tbody tr:last-child :is(th,td){border-bottom:0}
.is-style-r3loc-tarifs tbody td{text-align:right;white-space:nowrap}
.is-style-r3loc-tarifs tbody td:first-child{text-align:left;font-weight:600;white-space:normal}
.is-style-r3loc-tarifs tbody td small{display:block;font-weight:400;
 font-size:var(--wp--preset--font-size--mention,.82rem);color:var(--r3l-gris)}
.is-style-r3loc-tarifs tbody td:nth-child(n+5),
.is-style-r3loc-tarifs tbody td:nth-child(3):last-child{background:color-mix(in srgb,var(--r3l-couleur) 10%,#fff);color:var(--r3l-couleur);font-weight:600}
.is-style-r3loc-tarifs :is(th,td):nth-child(5),
.is-style-r3loc-tarifs :is(th,td):nth-child(3):last-child{border-left:2px solid var(--r3l-couleur)}
.is-style-r3loc-tarifs tbody tr:nth-child(even) td:nth-child(n+5),
.is-style-r3loc-tarifs tbody tr:nth-child(even) td:nth-child(3):last-child{background:color-mix(in srgb,var(--r3l-couleur) 17%,#fff)}
.is-style-r3loc-tarifs tbody tr:hover td:nth-child(n+5),
.is-style-r3loc-tarifs tbody tr:hover td:nth-child(3):last-child{background:color-mix(in srgb,var(--r3l-couleur) 25%,#fff)}
@supports not (background: color-mix(in srgb, red 50%, white)){
 .is-style-r3loc-tarifs tbody tr:nth-child(even),
 .is-style-r3loc-tarifs tbody td:nth-child(n+5),
.is-style-r3loc-tarifs tbody td:nth-child(3):last-child{background:var(--wp--preset--color--voile,#F4F5F7)}
 .is-style-r3loc-tarifs tbody :is(th,td){border-bottom:1px solid var(--r3l-filet)}
}

/* --- 6. Trous de contenu -------------------------------------------- */

/* Un champ non renseigné s'affiche comme un trou visible. On ne comble
   jamais un trou par une phrase écrite à la place de Nicolas. */
.r3loc-a-completer {
	display: block;
	border: 1px dashed var(--r3l-gris);
	border-radius: var(--r3l-rayon);
	padding: 0.7rem 0.9rem;
	color: var(--r3l-gris);
	font-size: var(--wp--preset--font-size--petit, 0.94rem);
	font-style: normal;
	background: repeating-linear-gradient(
		-45deg,
		transparent 0 7px,
		rgba(107, 114, 128, 0.07) 7px 14px
	);
}

/* --- 7. En-tête et pied de page ------------------------------------- */

.r3loc-entete {
	background: var(--wp--preset--color--papier, #fff);
	border-radius: var(--r3l-rayon);
}
.r3loc-entete .wp-block-site-logo img { height: 50px; width: auto; }

.r3loc-carnet a,
a.r3loc-carnet {
	display: inline-block;
	background: var(--r3l-marine);
	color: #fff !important;
	border-radius: 3px;
	padding: 0.5rem 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none !important;
}
.r3loc-carnet a:hover,
a.r3loc-carnet:hover { background: var(--r3l-encre); }

.r3loc-pied {
	background: var(--r3l-marine);
	color: #fff;
	border-radius: var(--r3l-rayon);
}
.r3loc-pied :is(a, h1, h2, h3, h4, h5, h6) { color: #fff; }
.r3loc-pied a:hover { color: var(--r3l-ciel); }

/* --- 8. Téléphone ---------------------------------------------------- */

@media (max-width: 781px) {
	.r3loc-barre-onglets { gap: 1.1rem; }
	.r3loc-onglet { font-size: var(--wp--preset--font-size--courant, 1.125rem); }
	.is-style-r3loc-portes > .wp-block-column { min-height: 140px; }
	.is-style-r3loc-tarifs :is(th, td) { padding: 0.55rem 0.5rem; }
	.is-style-r3loc-filigrane::after { width: 56%; }
}

/* --- 9. Confort et impression ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
	/* À l'impression, on rouvre tous les panneaux : une fiche de lieu
	   imprimée doit être complète. */
	.r3loc-barre-onglets { display: none; }
	.is-style-r3loc-panneau[hidden] { display: block !important; }
	.r3loc-onglets-actifs .r3loc-titre-replie {
		position: static; width: auto; height: auto;
		clip-path: none; margin: 0;
	}
	.is-style-r3loc-filigrane::after { display: none; }
	.is-style-r3loc-sombre, .is-style-r3loc-filigrane,
	.is-style-r3loc-portes > .wp-block-column {
		background: #fff !important; color: #000 !important;
		border: 1px solid #999;
	}
}

/* --- 10. Logos dans les cartes --------------------------------------
   garde-fou des logos : quel que soit le fichier deposé — carré,
   panoramique, immense — il se cale dans une bande de 90 px de haut
   et se centre. On ne redimensionne plus a la main dans l'editeur. */
.is-style-r3loc-carte .wp-block-image{margin-bottom:1rem}
.is-style-r3loc-carte .wp-block-image img{max-height:90px;width:auto;max-width:100%;object-fit:contain;display:block;margin-inline:auto;border-radius:0}
@media (max-width:781px){.is-style-r3loc-carte .wp-block-image img{max-height:72px}}

/* --- 11. Tuiles entierement cliquables -------------------------------
   toute la tuile est cliquable, pas seulement le titre.
   Le titre doit rester en position statique : sinon le voile
   invisible qu'il projette se cale sur le titre au lieu de la tuile. */
.is-style-r3loc-portes > .wp-block-column > :is(h1,h2,h3,h4){position:static;z-index:auto}
.is-style-r3loc-portes > .wp-block-column :is(h1,h2,h3,h4) a{position:static}
.is-style-r3loc-portes > .wp-block-column :is(h1,h2,h3,h4) a::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit}
.is-style-r3loc-portes > .wp-block-column:focus-within{outline:3px solid var(--r3l-ciel);outline-offset:2px}
.is-style-r3loc-portes > .wp-block-column{cursor:pointer}

/* --- 12. Tarifs en paves --------------------------------------------
   Une famille, un titre, puis un pave par option : titre, precision,
   prix. Le tarif societe vit dans le meme pave, sous un filet, a la
   couleur du lieu — on ne lit plus un tableau, on choisit une offre. */
.r3loc-famille{margin-block:var(--wp--preset--spacing--50,2.6rem)}
.r3loc-famille > h3,.r3loc-famille > h4{margin-bottom:.2rem}
.r3loc-famille-note{color:var(--r3l-gris);font-size:var(--wp--preset--font-size--petit,.94rem);margin-bottom:1rem}
.r3loc-grille-tarifs{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.r3loc-pave{background:var(--wp--preset--color--papier,#fff);border-radius:var(--r3l-rayon);border-top:4px solid var(--r3l-couleur);padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(25,32,65,.05),0 6px 18px rgba(25,32,65,.06);transition:transform .15s,box-shadow .15s}
.r3loc-pave:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(25,32,65,.13)}
.r3loc-pave-titre{font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;font-size:var(--wp--preset--font-size--titre-3,1.5rem);color:var(--wp--preset--color--marine);margin:0}
.r3loc-pave-note{color:var(--r3l-gris);font-size:var(--wp--preset--font-size--mention,.82rem);margin:.25rem 0 0}
.r3loc-pave-prix{margin:.7rem 0 0;font-weight:700;line-height:1;font-size:2.1rem;color:var(--r3l-couleur)}
.r3loc-pave-prix small{font-weight:600;font-size:.9rem;color:var(--r3l-gris);letter-spacing:.03em}
.r3loc-pave-ent{margin:.55rem 0 0;padding-top:.5rem;border-top:1px solid color-mix(in srgb,var(--r3l-couleur) 25%,#fff);font-size:var(--wp--preset--font-size--mention,.82rem);color:var(--r3l-gris);letter-spacing:.02em}
.r3loc-pave-ent b{color:var(--wp--preset--color--marine);font-weight:700}
@media (max-width:781px){.r3loc-grille-tarifs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}.r3loc-pave{padding:.8rem .85rem}.r3loc-pave-prix{font-size:1.7rem}}

/* --- 12 bis. Alignement des paves ------------------------------------
   alignement des paves : trois par rangee, la ligne societe collee en
   bas de chaque pave pour qu'elles s'alignent toutes a la meme hauteur,
   quelle que soit la longueur du titre. */
.r3loc-grille-tarifs{grid-template-columns:repeat(3,1fr);align-items:stretch}
.r3loc-pave{height:100%}
.r3loc-pave-ent{margin-top:auto}
.r3loc-famille > .is-style-r3loc-puce::before{display:none}
.r3loc-famille > h3{display:block}
@media (max-width:1000px){.r3loc-grille-tarifs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.r3loc-grille-tarifs{grid-template-columns:1fr}}

/* la grille gere les ecarts elle-meme : on neutralise la marge que
   WordPress ajoute entre blocs frères, sinon la premiere tuile de
   chaque rangee se decale vers le haut. */
.r3loc-grille-tarifs > *{margin-block:0 !important}
.r3loc-pave > *{margin-block:0}

/* --- 13. Formulaires -------------------------------------------------
   Contact Form 7, habille a la charte : champs sobres, etiquettes en
   capitales, bouton a la couleur du lieu. */
.wpcf7 label{display:block;font-weight:600;font-size:var(--wp--preset--font-size--petit,.94rem);letter-spacing:.04em;color:var(--wp--preset--color--marine);margin-bottom:.9rem}
.wpcf7 .facultatif{font-weight:400;color:var(--r3l-gris);font-size:var(--wp--preset--font-size--mention,.82rem);letter-spacing:0}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 input[type=number],.wpcf7 select,.wpcf7 textarea{width:100%;font:inherit;font-weight:400;margin-top:.3rem;padding:.6rem .7rem;border:1px solid var(--r3l-filet);border-radius:3px;background:#fff;color:var(--wp--preset--color--encre)}
.wpcf7 textarea{min-height:7rem;resize:vertical}
.wpcf7 :is(input,select,textarea):focus{outline:2px solid var(--r3l-couleur);outline-offset:1px;border-color:var(--r3l-couleur)}
.wpcf7 .wpcf7-radio{display:flex;flex-direction:column;gap:.35rem;margin-top:.35rem}
.wpcf7 .wpcf7-list-item{margin:0}
.wpcf7 .wpcf7-list-item label{font-weight:400;text-transform:none;letter-spacing:0;margin:0;display:flex;gap:.5rem;align-items:baseline}
.wpcf7 input[type=submit]{background:var(--r3l-couleur);color:#fff;border:0;border-radius:3px;padding:.7rem 1.6rem;font:inherit;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.wpcf7 input[type=submit]:hover{background:var(--wp--preset--color--encre)}
.wpcf7 .wpcf7-not-valid-tip{color:var(--wp--preset--color--spot);font-size:var(--wp--preset--font-size--mention,.82rem)}
.wpcf7 form .wpcf7-response-output{border-radius:3px;border-width:2px;padding:.7rem .9rem;margin:1rem 0 0}
.wpcf7 .wpcf7-spinner{margin-left:.6rem}
@media (min-width:720px){.wpcf7 form{max-width:620px}}